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>Reviews Screen</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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar (mock) */18  .statusbar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: flex-end;24    color: #616161;25    font-size: 26px;26    letter-spacing: 0.5px;27  }28  .status-dot {29    width: 12px; height: 12px; background: #757575; border-radius: 50%; margin: 0 10px;30  }31 32  /* Top app bar */33  .topbar {34    height: 120px;35    display: flex;36    align-items: center;37    padding: 0 32px;38    border-bottom: 1px solid #eaeaea;39    background: #fff;40  }41  .back-btn {42    width: 72px;43    height: 72px;44    display: flex;45    align-items: center;46    justify-content: center;47    margin-right: 10px;48  }49  .topbar-title {50    font-size: 48px;51    font-weight: 600;52    color: #1b1c1e;53  }54 55  /* Content area */56  .content {57    height: calc(2400px - 90px - 120px - 120px);58    overflow: hidden;59    overflow-y: auto;60    padding-bottom: 24px;61  }62 63  .review {64    padding: 32px 40px 28px 40px;65    background: #fff;66    border-bottom: 1px solid #e6e6e6;67  }68  .review-header {69    display: flex;70    align-items: center;71    justify-content: space-between;72  }73  .reviewer {74    display: flex;75    align-items: center;76  }77  .avatar {78    width: 104px;79    height: 104px;80    border-radius: 50%;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    color: #757575;84    display: flex;85    align-items: center;86    justify-content: center;87    font-size: 20px;88    text-align: center;89    margin-right: 28px;90  }91  .name-row {92    display: flex; align-items: center; flex-wrap: wrap;93  }94  .name {95    font-size: 36px;96    font-weight: 700;97    color: #1f2937;98    margin-right: 16px;99  }100  .verified {101    display: inline-flex;102    align-items: center;103    font-size: 28px;104    color: #607d8b;105    background: #f1f5f7;106    border-radius: 18px;107    padding: 6px 14px;108    gap: 8px;109  }110  .date {111    font-size: 28px;112    color: #7a7a7a;113  }114 115  .stars {116    margin-top: 22px;117    display: flex;118    align-items: center;119    gap: 10px;120  }121  .stars svg { width: 44px; height: 44px; }122  .star-fill { fill: #111; }123  .star-empty { fill: none; stroke: #111; stroke-width: 2; }124 125  .review-title {126    margin-top: 24px;127    font-size: 40px;128    font-weight: 700;129    color: #111827;130  }131  .review-text {132    margin-top: 8px;133    font-size: 32px;134    color: #4b5563;135  }136 137  .bullets {138    margin-top: 22px;139    font-size: 30px;140    color: #1f2937;141  }142  .bullets .dot { color: #9aa1a8; padding: 0 12px; }143 144  .hashtags {145    margin-top: 18px;146    font-size: 28px;147    color: #6b7280;148  }149 150  .helpful {151    margin-top: 28px;152    display: inline-flex;153    align-items: center;154    gap: 14px;155    color: #374151;156    font-weight: 700;157    font-size: 32px;158  }159 160  /* Bottom gesture area */161  .gesture {162    position: absolute;163    bottom: 0;164    left: 0;165    right: 0;166    height: 120px;167    background: #000;168    display: flex;169    align-items: center;170    justify-content: center;171  }172  .gesture .pill {173    width: 300px; height: 10px; background: #e5e5e5; border-radius: 6px;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Mock status bar -->180  <div class="statusbar">181    <span>12:06</span>182    <div class="status-dot"></div>183    <div class="status-dot"></div>184    <div class="status-dot"></div>185  </div>186 187  <!-- Top App Bar -->188  <div class="topbar">189    <div class="back-btn">190      <svg viewBox="0 0 24 24" width="36" height="36">191        <path d="M15 19l-7-7 7-7" stroke="#1f2937" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>192      </svg>193    </div>194    <div class="topbar-title">Reviews</div>195  </div>196 197  <!-- Content -->198  <div class="content">199    <!-- Review 1 -->200    <div class="review">201      <div class="review-header">202        <div class="reviewer">203          <div class="avatar">[IMG: User Avatar]</div>204          <div>205            <div class="name-row">206              <div class="name">RITUZ KUMAR</div>207              <div class="verified">208                <svg viewBox="0 0 24 24" width="26" height="26">209                  <circle cx="12" cy="12" r="10" fill="#607d8b"></circle>210                  <path d="M7 12.5l3 3 7-7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>211                </svg>212                <span>Verified buyer</span>213              </div>214            </div>215          </div>216        </div>217        <div class="date">21/01/2023</div>218      </div>219 220      <div class="stars">221        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>222        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>223        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>224        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>225        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>226      </div>227 228      <div class="review-title">Great product.</div>229      <div class="review-text">Nice</div>230 231      <div class="bullets">232        Great Fit <span class="dot">•</span> Great Quality <span class="dot">•</span> Packaging <span class="dot">•</span> Speedy Delivery <span class="dot">•</span> Value for Money233      </div>234 235      <div class="hashtags">#Perfectly matched with Image  #Regular Fit  #Value for money</div>236 237      <div class="helpful">238        <svg viewBox="0 0 24 24" width="32" height="32">239          <path d="M2 10h4v10H2zM8 10l5-6c.6-.8 2 0 1.6 1L13 10h6c1.1 0 2 .9 2 2l-1 6c0 1.1-.9 2-2 2H8V10z" fill="none" stroke="#374151" stroke-width="2"></path>240        </svg>241        <span>Helpful</span>242      </div>243    </div>244 245    <!-- Review 2 -->246    <div class="review">247      <div class="review-header">248        <div class="reviewer">249          <div class="avatar">[IMG: User Avatar]</div>250          <div>251            <div class="name-row">252              <div class="name" style="font-weight:600;">Anonymous</div>253              <div class="verified">254                <svg viewBox="0 0 24 24" width="26" height="26">255                  <circle cx="12" cy="12" r="10" fill="#607d8b"></circle>256                  <path d="M7 12.5l3 3 7-7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>257                </svg>258                <span>Verified buyer</span>259              </div>260            </div>261          </div>262        </div>263        <div class="date">10/04/2023</div>264      </div>265 266      <div class="stars">267        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>268        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>269        <svg viewBox="0 0 24 24"><polygon class="star-fill" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>270        <svg viewBox="0 0 24 24"><polygon class="star-empty" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>271        <svg viewBox="0 0 24 24"><polygon class="star-empty" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>272      </div>273 274      <div class="review-title" style="text-transform: lowercase;">good</div>275      <div class="review-text">Good</div>276 277      <div class="bullets">278        Did not match the image <span class="dot">•</span> Loose Fit <span class="dot">•</span> Value for money279      </div>280 281      <div class="hashtags">#Packaging  #Speedy Delivery  #Value for Money</div>282 283      <div class="helpful">284        <svg viewBox="0 0 24 24" width="32" height="32">285          <path d="M2 10h4v10H2zM8 10l5-6c.6-.8 2 0 1.6 1L13 10h6c1.1 0 2 .9 2 2l-1 6c0 1.1-.9 2-2 2H8V10z" fill="none" stroke="#374151" stroke-width="2"></path>286        </svg>287        <span>Helpful</span>288      </div>289    </div>290  </div>291 292  <!-- Bottom gesture bar -->293  <div class="gesture"><div class="pill"></div></div>294</div>295</body>296</html>