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>Comments UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .statusbar {19    height: 92px;20    padding: 0 34px;21    display: flex;22    align-items: center;23    font-size: 38px;24    color: #000;25  }26  .statusbar .left { flex: 1; display: flex; gap: 18px; align-items: center; }27  .statusbar .right { display: flex; gap: 24px; align-items: center; color: #555; }28 29  /* Top toolbar */30  .toolbar {31    height: 116px;32    display: flex;33    align-items: center;34    position: relative;35    padding: 0 24px;36  }37  .toolbar .title {38    position: absolute;39    left: 0; right: 0;40    text-align: center;41    font-size: 56px;42    font-weight: 700;43    color: #222;44  }45  .icon-btn {46    width: 88px;47    height: 88px;48    display: flex;49    align-items: center;50    justify-content: center;51    cursor: default;52  }53  .icon {54    width: 40px; height: 40px; stroke: #222; fill: none; stroke-width: 4;55  }56  .icon.solid { fill: #222; stroke: none; }57 58  /* Scrollable content */59  .content {60    position: absolute;61    top: 208px; /* statusbar + toolbar */62    bottom: 180px; /* input bar space */63    left: 0; right: 0;64    overflow-y: auto;65    padding-bottom: 40px;66  }67 68  .comment {69    padding: 32px 48px 24px 48px;70    border-bottom: 1px solid #ECECEC;71  }72  .comment-header {73    display: grid;74    grid-template-columns: 96px 1fr 72px;75    gap: 24px;76    align-items: center;77  }78  .avatar {79    width: 96px; height: 96px;80    background: #FFC107;81    border-radius: 50%;82    color: #333;83    display: flex; align-items: center; justify-content: center;84    font-weight: 700; font-size: 44px;85  }86  .meta .name {87    font-size: 36px;88    font-weight: 700;89    color: #FF6D00;90  }91  .meta .sub {92    margin-top: 6px;93    font-size: 28px;94    color: #777;95    display: flex; align-items: center; gap: 10px;96  }97  .report {98    display: flex; justify-content: center; align-items: center;99  }100  .report svg { width: 44px; height: 44px; fill: #222; }101 102  .comment-body {103    margin-left: 120px;104    margin-top: 18px;105    font-size: 36px;106    line-height: 1.4;107    color: #222;108  }109  .translate {110    margin-left: 120px;111    margin-top: 12px;112    font-size: 28px;113    color: #777;114  }115  .translate .link { color: #FF6D00; font-weight: 600; cursor: default; }116 117  .photo {118    margin: 26px 48px 0 120px;119    height: 680px;120    border-radius: 24px;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    display: flex; align-items: center; justify-content: center;124    color: #757575;125    font-size: 30px;126    text-align: center;127    padding: 12px;128  }129 130  .actions {131    margin: 24px 48px 8px 120px;132    display: flex; align-items: center; gap: 36px;133    color: #444;134  }135  .actions .action {136    display: inline-flex; align-items: center; gap: 14px;137    font-size: 32px; color: #444;138  }139  .actions svg { width: 44px; height: 44px; stroke: #444; fill: none; stroke-width: 4; }140 141  /* Input bar */142  .input-bar {143    position: absolute;144    left: 0; right: 0; bottom: 76px;145    padding: 16px 24px;146    background: #FFFFFF;147    border-top: 1px solid #EAEAEA;148    display: flex; align-items: center; gap: 20px;149  }150  .camera {151    width: 84px; height: 84px; border-radius: 18px;152    display: flex; align-items: center; justify-content: center;153    color: #FF6D00;154  }155  .camera svg { width: 44px; height: 44px; stroke: #FF6D00; fill: none; stroke-width: 4; }156  .input-field {157    flex: 1;158    height: 96px;159    border: 2px solid #E0E0E0;160    border-radius: 24px;161    display: flex; align-items: center; padding: 0 28px;162    font-size: 34px; color: #777;163    background: #fff;164  }165  .send {166    width: 120px;167    text-align: right;168    font-size: 34px;169    color: #C2C2C2;170    padding-right: 16px;171  }172 173  /* Home indicator */174  .home-indicator {175    position: absolute;176    bottom: 22px; left: 50%;177    transform: translateX(-50%);178    width: 320px; height: 12px; background: #B5B5B5;179    border-radius: 12px;180    opacity: 0.8;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="statusbar">189    <div class="left">190      <div style="font-weight:600;">12:42</div>191      <div style="width:26px;height:26px;background:#888;border-radius:4px;"></div>192      <div style="width:26px;height:26px;background:#888;border-radius:13px;"></div>193    </div>194    <div class="right">195      <div style="width:26px;height:26px;border-radius:50%;background:#777;"></div>196      <div style="width:20px;height:30px;border:3px solid #777;border-radius:4px;"></div>197    </div>198  </div>199 200  <!-- Toolbar -->201  <div class="toolbar">202    <div class="icon-btn">203      <svg class="icon" viewBox="0 0 48 48">204        <path d="M30 8 L14 24 L30 40" stroke-linecap="round" stroke-linejoin="round"></path>205      </svg>206    </div>207    <div class="title">Comments</div>208  </div>209 210  <!-- Scrollable Content -->211  <div class="content">212 213    <!-- Comment 1 -->214    <div class="comment">215      <div class="comment-header">216        <div class="avatar">S</div>217        <div class="meta">218          <div class="name">Sara</div>219          <div class="sub">4 days ago <span>🇧🇪</span></div>220        </div>221        <div class="report" title="Report">222          <svg viewBox="0 0 24 24">223            <path d="M5 3h12l-2 4 2 4H5v8" fill="#222"></path>224          </svg>225        </div>226      </div>227      <div class="comment-body">easy and delicious!</div>228      <div class="translate">Show original language: <span class="link">English</span></div>229 230      <div class="photo">[IMG: Blueberry-topped loaf cake on a cutting board]</div>231 232      <div class="actions">233        <div class="action">234          <svg viewBox="0 0 48 48">235            <path d="M34 10c-4 0-6 3-10 7-4-4-6-7-10-7C8 10 4 14 4 19c0 9 11 14 20 23 9-9 20-14 20-23 0-5-4-9-10-9z" stroke-linejoin="round"></path>236          </svg>237          <span>0</span>238        </div>239        <div class="action">240          <svg viewBox="0 0 48 48">241            <path d="M8 10h32v20H18l-10 8z" stroke-linejoin="round"></path>242          </svg>243          <span>Reply</span>244        </div>245      </div>246    </div>247 248    <!-- Comment 2 -->249    <div class="comment">250      <div class="comment-header">251        <div class="avatar">S</div>252        <div class="meta">253          <div class="name" style="text-transform: lowercase;">sophie reyer</div>254          <div class="sub">14 days ago <span>🇩🇪</span></div>255        </div>256        <div class="report" title="Report">257          <svg viewBox="0 0 24 24">258            <path d="M5 3h12l-2 4 2 4H5v8" fill="#222"></path>259          </svg>260        </div>261      </div>262      <div class="comment-body">One of my absolute favorite recipes! 😍</div>263      <div class="translate">Show original language: <span class="link">German</span></div>264 265      <div class="actions">266        <div class="action">267          <svg viewBox="0 0 48 48">268            <path d="M34 10c-4 0-6 3-10 7-4-4-6-7-10-7C8 10 4 14 4 19c0 9 11 14 20 23 9-9 20-14 20-23 0-5-4-9-10-9z" stroke-linejoin="round"></path>269          </svg>270          <span>0</span>271        </div>272        <div class="action">273          <svg viewBox="0 0 48 48">274            <path d="M8 10h32v20H18l-10 8z" stroke-linejoin="round"></path>275          </svg>276          <span>Reply</span>277        </div>278      </div>279    </div>280 281  </div>282 283  <!-- Input Bar -->284  <div class="input-bar">285    <div class="camera">286      <svg viewBox="0 0 48 48">287        <path d="M16 14l4-4h8l4 4h6v22H10V14h6z" />288        <circle cx="24" cy="25" r="6"></circle>289      </svg>290    </div>291    <div class="input-field">Write a comment</div>292    <div class="send">Send</div>293  </div>294 295  <!-- Home indicator -->296  <div class="home-indicator"></div>297 298</div>299</body>300</html>