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 Recreation</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; color: #111; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 88px; padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    font-size: 34px; color: #111;20  }21  .status-right { display: flex; align-items: center; gap: 18px; color: #444; font-size: 28px; }22  .icon-battery {23    width: 44px; height: 22px; border: 2px solid #444; border-radius: 6px; position: relative;24  }25  .icon-battery::after {26    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 10px; background: #444; border-radius: 1px;27  }28  .icon-battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 10px; background: #444; border-radius: 3px; }29 30  /* Header with back + bell */31  .header {32    height: 120px; display: flex; align-items: center; justify-content: space-between;33    padding: 0 36px;34  }35  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }36  .icon { width: 44px; height: 44px; }37  .bell-wrap { position: relative; }38  .badge {39    position: absolute; top: 6px; right: 6px;40    background: #FF4B5C; color: #fff; font-size: 24px; line-height: 24px;41    width: 34px; height: 34px; border-radius: 50%;42    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;43  }44 45  /* Hero */46  .hero {47    width: 1080px; height: 720px; position: relative;48    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;49    display: flex; align-items: center; justify-content: center;50  }51  .hero .img-label {52    position: absolute; left: 24px; top: 18px; color: #757575; font-size: 26px; background: rgba(255,255,255,0.6); padding: 6px 10px; border-radius: 8px; border: 1px solid #BDBDBD;53  }54  .hero .title {55    max-width: 880px; text-align: center; color: #fff; font-weight: 800; line-height: 1.2;56    font-size: 64px; text-shadow: 0 2px 8px rgba(0,0,0,0.35);57  }58 59  /* Action row */60  .actions {61    display: flex; align-items: center; justify-content: space-between;62    padding: 34px 40px 18px 40px;63  }64  .like { display: flex; align-items: center; gap: 18px; font-size: 36px; color: #111; }65  .bookmark .icon { width: 48px; height: 48px; }66 67  /* Reviewer card */68  .review-card {69    margin: 20px 36px; padding: 28px; border-radius: 28px;70    background: #F2F2F2; border: 1px solid #E0E0E0; color: #333;71  }72  .review-top { display: flex; align-items: center; gap: 20px; }73  .avatar {74    width: 72px; height: 72px; border-radius: 50%;75    background: #E0E0E0; border: 2px solid #BDBDBD;76    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;77  }78  .review-meta { display: flex; align-items: center; gap: 10px; }79  .reviewed-by { font-size: 26px; color: #8A8A8A; }80  .review-name { font-size: 30px; font-weight: 700; color: #111; }81  .review-role { font-size: 28px; color: #666; }82  .check {83    width: 26px; height: 26px; background: #20C997; border-radius: 50%;84    display: inline-flex; align-items: center; justify-content: center;85  }86  .review-body { margin-top: 18px; font-size: 30px; color: #444; line-height: 1.4; }87  .review-body a { color: #2EAFCC; text-decoration: underline; }88 89  /* Chips */90  .chips { display: flex; gap: 20px; padding: 24px 36px 8px; }91  .chip {92    padding: 18px 32px; border-radius: 999px; font-size: 30px;93    background: #EFEFEF; color: #666;94  }95  .chip.active { background: #F36B8A; color: #fff; }96 97  /* Comment item */98  .comment {99    display: flex; gap: 20px; padding: 20px 36px;100  }101  .comment .avatar-big {102    width: 92px; height: 92px; border-radius: 50%;103    background: #FFC1D2; display: flex; align-items: center; justify-content: center; color: #444; font-size: 28px; border: 2px solid #FF94AE;104    flex: 0 0 auto;105  }106  .bubble {107    flex: 1;108    background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.06);109    position: relative;110  }111  .bubble .more {112    position: absolute; right: 16px; top: 14px;113    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #999;114  }115  .comment-text { font-size: 34px; color: #222; line-height: 1.35; padding-right: 50px; }116  .comment-image {117    margin-top: 18px; width: 840px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;118    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;119  }120 121  /* Composer */122  .composer {123    position: absolute; left: 0; right: 0; bottom: 64px; height: 120px;124    display: flex; align-items: center; gap: 20px; padding: 0 24px;125    background: #fff; border-top: 1px solid #ECECEC;126  }127  .camera { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }128  .input {129    flex: 1; height: 78px; background: #F5F5F5; border-radius: 28px; display: flex; align-items: center; padding: 0 26px; color: #9A9A9A; font-size: 32px;130    border: 1px solid #E6E6E6;131  }132  .send { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }133 134  /* Home indicator */135  .home-indicator {136    position: absolute; left: 50%; transform: translateX(-50%);137    bottom: 18px; width: 240px; height: 10px; border-radius: 6px; background: #D0D0D0;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div class="time">10:29</div>147    <div class="status-right">148      <span>🔕</span>149      <span>⏺</span>150      <span>📶</span>151      <div class="icon-battery"><div class="level"></div></div>152      <span>100%</span>153    </div>154  </div>155 156  <!-- Header -->157  <div class="header">158    <div class="icon-btn">159      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">160        <path d="M15 18l-6-6 6-6"></path>161      </svg>162    </div>163    <div class="bell-wrap icon-btn">164      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">165        <path d="M18 8a6 6 0 10-12 0c0 7-2 6-2 8h16c0-2-2 0-2-8"></path>166        <path d="M13.73 21a2 2 0 01-3.46 0"></path>167      </svg>168      <div class="badge">1</div>169    </div>170  </div>171 172  <!-- Hero section -->173  <div class="hero">174    <div class="img-label">[IMG: Hands holding ultrasound photo on yellow background]</div>175    <div class="title">Baby's first photo: A place to share your ultrasound scan photo, if you like</div>176  </div>177 178  <!-- Actions -->179  <div class="actions">180    <div class="like">181      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">182        <path d="M20.8 5.6a5.5 5.5 0 00-7.8 0L12 6.6l-1-1a5.5 5.5 0 10-7.8 7.8l1 1L12 22l7.8-7.6 1-1a5.5 5.5 0 000-7.8z"></path>183      </svg>184      <span>8.8K</span>185    </div>186    <div class="bookmark">187      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188        <path d="M6 3h12v18l-6-4-6 4z"></path>189      </svg>190    </div>191  </div>192 193  <!-- Reviewer card -->194  <div class="review-card">195    <div class="review-top">196      <div class="avatar">[Avatar]</div>197      <div>198        <div class="reviewed-by">Reviewed by</div>199        <div class="review-meta">200          <div class="review-name">Florence</div>201          <div class="check">202            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">203              <path d="M5 13l4 4L19 7"></path>204            </svg>205          </div>206          <div class="review-role">, Community Manager</div>207        </div>208      </div>209    </div>210    <div class="review-body">211      Curious about how experts can tell your baby's sex at a scan? <a href="#">Discover more here.</a>212    </div>213  </div>214 215  <!-- Chips -->216  <div class="chips">217    <div class="chip active">Top</div>218    <div class="chip">Newest</div>219    <div class="chip">My</div>220    <div class="chip">Expert</div>221  </div>222 223  <!-- Comment -->224  <div class="comment">225    <div class="avatar-big">[User]</div>226    <div class="bubble">227      <div class="more">228        <svg viewBox="0 0 24 24" width="26" height="26" fill="#999">229          <circle cx="12" cy="5" r="2.2"></circle>230          <circle cx="12" cy="12" r="2.2"></circle>231          <circle cx="12" cy="19" r="2.2"></circle>232        </svg>233      </div>234      <div class="comment-text">235        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❤️236      </div>237      <div class="comment-image">[IMG: Attached photo]</div>238    </div>239  </div>240 241  <!-- Composer -->242  <div class="composer">243    <div class="camera">244      <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">245        <path d="M4 7h4l2-2h4l2 2h4v12H4z"></path>246        <circle cx="12" cy="13" r="4"></circle>247      </svg>248    </div>249    <div class="input">Write a comment…</div>250    <div class="send">251      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">252        <path d="M22 2L11 13"></path>253        <path d="M22 2l-7 20-4-9-9-4z"></path>254      </svg>255    </div>256  </div>257 258  <!-- Home indicator -->259  <div class="home-indicator"></div>260</div>261</body>262</html>