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 Screen</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", Roboto, Arial, sans-serif;16    color: #222;17  }18  .status-bar {19    height: 88px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #111;25    font-weight: 600;26    letter-spacing: 0.5px;27  }28  .status-right { display: flex; gap: 22px; align-items: center; opacity: 0.9; }29  .header {30    position: relative;31    height: 140px;32    display: flex;33    align-items: center;34    padding: 0 36px;35  }36  .header h1 {37    margin: 0 auto;38    font-size: 64px;39    font-weight: 700;40    letter-spacing: 0.2px;41  }42  .back-btn {43    position: absolute;44    left: 36px;45    width: 64px;46    height: 64px;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .content {52    position: absolute;53    left: 0; right: 0;54    top: 228px;55    bottom: 220px;56    overflow: hidden;57    padding: 0 40px 20px 40px;58  }59  .comment {60    position: relative;61    display: flex;62    gap: 28px;63    padding: 36px 0;64  }65  .avatar {66    width: 92px;67    height: 92px;68    border-radius: 50%;69    background: #F9C53A;70    display: flex;71    align-items: center;72    justify-content: center;73    font-weight: 700;74    color: #222;75    flex: 0 0 auto;76  }77  .c-body { flex: 1; min-width: 0; }78  .meta {79    display: flex;80    align-items: center;81    gap: 14px;82    font-size: 28px;83    color: #777;84  }85  .name {86    color: #FF6A3D;87    font-weight: 600;88    font-size: 32px;89    letter-spacing: 0.3px;90  }91  .flag-action {92    position: absolute;93    right: 8px;94    top: 36px;95    width: 56px; height: 56px;96    display: flex; align-items: center; justify-content: center;97  }98  .text {99    margin-top: 22px;100    font-size: 40px;101    line-height: 1.45;102    color: #222;103  }104  .translate {105    margin-top: 18px;106    font-size: 28px;107    color: #777;108  }109  .translate .link { color: #FF6A3D; font-weight: 600; }110  .reactions {111    display: flex;112    align-items: center;113    gap: 26px;114    margin-top: 28px;115    color: #777;116    font-size: 28px;117  }118  .react {119    display: flex; align-items: center; gap: 12px;120  }121  .photo {122    margin-top: 24px;123    width: 100%;124    height: 960px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    border-radius: 28px;128    display: flex;129    align-items: center;130    justify-content: center;131    color: #757575;132    font-size: 34px;133  }134  .composer {135    position: absolute;136    left: 0; right: 0; bottom: 80px;137    padding: 16px 24px 24px;138    border-top: 1px solid #eee;139    background: #fff;140  }141  .composer-row {142    display: flex; align-items: center; gap: 20px;143    padding: 0 16px;144  }145  .input-pill {146    flex: 1;147    height: 96px;148    border: 1px solid #E3E3E3;149    border-radius: 24px;150    display: flex; align-items: center;151    padding: 0 28px;152    color: #999;153    font-size: 32px;154    background: #fff;155  }156  .send {157    color: #999;158    font-weight: 600;159    font-size: 32px;160  }161  .home-indicator {162    position: absolute;163    bottom: 24px;164    left: 50%;165    transform: translateX(-50%);166    width: 300px;167    height: 12px;168    background: #C9C9C9;169    border-radius: 10px;170    opacity: 0.8;171  }172  /* Small helpers */173  .emoji { font-size: 30px; }174</style>175</head>176<body>177<div id="render-target">178  <!-- Status Bar -->179  <div class="status-bar">180    <div style="font-size:34px;">12:51</div>181    <div class="status-right">182      <!-- Signal -->183      <svg width="36" height="28" viewBox="0 0 24 16" fill="none" stroke="#444" stroke-width="2">184        <rect x="1" y="8" width="3" height="7" fill="#444"></rect>185        <rect x="6" y="5" width="3" height="10" fill="#444"></rect>186        <rect x="11" y="2" width="3" height="13" fill="#444"></rect>187        <rect x="16" y="0" width="3" height="15" fill="#444"></rect>188      </svg>189      <!-- Wi-Fi -->190      <svg width="32" height="22" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">191        <path d="M2 8c6-6 14-6 20 0" />192        <path d="M5 11c4-4 10-4 14 0" />193        <path d="M8 14c2-2 6-2 8 0" />194        <circle cx="12" cy="18" r="1.2" fill="#444" stroke="none"></circle>195      </svg>196      <!-- Battery -->197      <svg width="40" height="22" viewBox="0 0 36 18" fill="none">198        <rect x="1" y="3" width="30" height="12" rx="2" stroke="#444" stroke-width="2"></rect>199        <rect x="3" y="5" width="22" height="8" fill="#444"></rect>200        <rect x="32" y="6" width="3" height="6" rx="1" fill="#444"></rect>201      </svg>202    </div>203  </div>204 205  <!-- Header -->206  <div class="header">207    <div class="back-btn">208      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2.5">209        <path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"></path>210      </svg>211    </div>212    <h1>Comments</h1>213  </div>214 215  <!-- Content -->216  <div class="content">217    <!-- Comment 1 -->218    <div class="comment">219      <div class="avatar">N</div>220      <div class="c-body">221        <div class="meta">222          <span class="name">Natalie Larson</span>223          <span>a moment ago</span>224          <span class="emoji">🇩🇪</span>225        </div>226        <div class="text">the recipe turned out great.</div>227        <div class="reactions">228          <div class="react">229            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.8">230              <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 5.5-7 10-7 10z"></path>231            </svg>232            <span>0</span>233          </div>234          <div class="react">235            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.8">236              <path d="M21 15a4 4 0 0 1-4 4H8l-5 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" stroke-linejoin="round"></path>237            </svg>238            <span>Reply</span>239          </div>240        </div>241      </div>242      <div class="flag-action">243        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">244          <path d="M5 3v18"></path>245          <path d="M5 4h10l-1.5 3L15 10H5z"></path>246        </svg>247      </div>248    </div>249 250    <!-- Comment 2 -->251    <div class="comment" style="margin-top: 10px;">252      <div class="avatar" style="background:#F5C33A;">S</div>253      <div class="c-body">254        <div class="meta">255          <span class="name">Sara</span>256          <span>4 days ago</span>257          <span class="emoji">🇧🇪</span>258        </div>259        <div class="text">easy and delicious!</div>260        <div class="translate">Show original language: <span class="link">English</span></div>261        <div class="photo">[IMG: Blueberry loaf cake photo]</div>262        <div class="reactions">263          <div class="react">264            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.8">265              <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 5.5-7 10-7 10z"></path>266            </svg>267            <span>0</span>268          </div>269          <div class="react">270            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.8">271              <path d="M21 15a4 4 0 0 1-4 4H8l-5 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" stroke-linejoin="round"></path>272            </svg>273            <span>Reply</span>274          </div>275        </div>276      </div>277      <div class="flag-action">278        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">279          <path d="M5 3v18"></path>280          <path d="M5 4h10l-1.5 3L15 10H5z"></path>281        </svg>282      </div>283    </div>284  </div>285 286  <!-- Composer -->287  <div class="composer">288    <div class="composer-row">289      <div style="width:72px;height:72px;display:flex;align-items:center;justify-content:center;">290        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#FF6A3D" stroke-width="1.8">291          <rect x="4" y="6" width="16" height="12" rx="2"></rect>292          <circle cx="12" cy="12" r="3"></circle>293          <path d="M9 6l2-2h2l2 2" stroke="#FF6A3D"></path>294        </svg>295      </div>296      <div class="input-pill">Write a comment</div>297      <div class="send">Send</div>298    </div>299  </div>300 301  <!-- Home indicator -->302  <div class="home-indicator"></div>303</div>304</body>305</html>