GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Product Reviews UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #F6F7F9;11  }12 13  /* Top header / status + search */14  .status-bar {15    height: 140px;16    background: #E9ECEF;17    padding: 24px 36px 0 36px;18    color: #222;19    font-size: 36px;20    display: flex;21    align-items: center;22    gap: 24px;23  }24  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }25  .icon { width: 40px; height: 40px; display: inline-block; }26  .app-bar {27    height: 140px;28    background: #E9ECEF;29    display: flex;30    align-items: center;31    padding: 0 36px 24px 36px;32    gap: 24px;33  }34  .search-wrap {35    flex: 1;36    background: #fff;37    border-radius: 18px;38    height: 110px;39    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;40    border: 1px solid #D9D9D9;41    display: flex;42    align-items: center;43    padding: 0 30px;44    gap: 24px;45  }46  .search-text { color: #666; font-size: 42px; flex: 1; }47  .round-btn {48    width: 88px; height: 88px; border-radius: 44px; background: #fff;49    border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center;50  }51 52  /* Content */53  .content {54    background: #fff;55    border-top-left-radius: 24px; border-top-right-radius: 24px;56    margin-top: 0;57    padding: 24px 36px 220px 36px;58  }59  .rating-line { display: flex; align-items: center; gap: 16px; padding-top: 12px; }60  .stars { display: flex; gap: 8px; }61  .title { font-size: 44px; color: #222; font-weight: 600; }62  .subhead { font-size: 44px; margin: 26px 0 18px 0; color: #222; }63  .img-row { display: flex; gap: 26px; }64  .img-ph {65    width: 316px; height: 316px; background: #E0E0E0;66    border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;67    color: #757575; font-size: 32px;68  }69 70  .meta { margin-top: 18px; color: #666; font-size: 36px; }71  .chips { display: flex; gap: 20px; margin-top: 22px; }72  .chip {73    display: inline-flex; align-items: center; gap: 16px;74    border: 1px solid #D0D0D0; border-radius: 50px; padding: 18px 28px;75    background: #FAFAFA; color: #333; font-size: 34px;76  }77  .verified {78    display: flex; align-items: center; gap: 16px;79    color: #4D4D4D; font-size: 34px; margin-top: 22px;80  }81 82  .section-divider { height: 1px; background: #EEE; margin: 36px 0; }83 84  .review-title { display: flex; align-items: center; gap: 16px; font-size: 42px; color: #222; font-weight: 600; }85  .review-text { font-size: 44px; color: #222; margin-top: 22px; }86 87  .list-link {88    margin-top: 24px; border-top: 1px solid #EEE; padding: 30px 4px;89    display: flex; justify-content: space-between; align-items: center;90    font-size: 42px; color: #111; font-weight: 600;91  }92 93  .qa-header { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }94  .qa-title { font-size: 52px; font-weight: 700; color: #111; }95  .search-chip {96    display: inline-flex; align-items: center; gap: 18px; border: 1px solid #D0D0D0;97    border-radius: 12px; padding: 18px 26px; background: #fff; font-size: 40px; color: #222;98  }99 100  .qa-item { margin-top: 36px; font-size: 44px; color: #111; }101  .qa-small { font-size: 40px; color: #666; margin-top: 18px; }102 103  /* Bottom bar */104  .bottom-bar {105    position: absolute; left: 0; right: 0; bottom: 0;106    height: 180px; background: #FFFFFF; border-top: 1px solid #E0E0E0;107    display: flex; align-items: center; justify-content: space-between; padding: 0 36px;108  }109  .btn {110    height: 120px; border-radius: 18px; display: flex; align-items: center; justify-content: center;111    font-size: 42px; font-weight: 600;112  }113  .btn.small { width: 180px; background: #fff; border: 1px solid #D0D0D0; }114  .btn.mid { flex: 1; margin: 0 24px; background: #fff; border: 1px solid #D0D0D0; color: #222; }115  .btn.primary { width: 300px; background: #F8C34B; color: #111; border: none; }116 117  /* Floating help button */118  .floating-help {119    position: absolute; right: 36px; bottom: 240px;120    width: 132px; height: 132px; border-radius: 66px;121    background: #1677FF; box-shadow: 0 8px 20px rgba(0,0,0,0.15);122    display: flex; align-items: center; justify-content: center;123  }124  .floating-help-inner {125    width: 90px; height: 90px; border-radius: 45px; background: #FFDD55;126    display: flex; align-items: center; justify-content: center; color: #1E4FFF; font-weight: 800; font-size: 56px;127    border: 4px solid rgba(255,255,255,0.6);128  }129 130  /* Simple SVG helpers */131  .svg { width: 48px; height: 48px; }132  .green { fill: #2ECC71; }133  .gray { fill: #DADADA; }134 135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status bar -->141  <div class="status-bar">142    <div>8:16</div>143    <div class="status-icons">144      <!-- simple status dots -->145      <svg class="svg" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#666"/></svg>146      <svg class="svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#666"/></svg>147      <svg class="svg" viewBox="0 0 24 24"><circle cx="18" cy="12" r="3" fill="#666"/></svg>148      <svg class="svg" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#666"/></svg>149      <div style="font-size:34px;color:#666;">87%</div>150    </div>151  </div>152 153  <!-- App bar with search -->154  <div class="app-bar">155    <!-- Back arrow -->156    <div class="round-btn">157      <svg class="svg" viewBox="0 0 24 24">158        <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159      </svg>160    </div>161    <div class="search-wrap">162      <svg class="svg" viewBox="0 0 24 24">163        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>164        <path d="M20 20l-4-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>165      </svg>166      <div class="search-text">Search for products</div>167      <svg class="svg" viewBox="0 0 24 24">168        <path d="M12 3c2 0 3 1 3 3v5c0 2-1 3-3 3s-3-1-3-3V6c0-2 1-3 3-3z" fill="#777"/>169        <rect x="10" y="17" width="4" height="4" rx="1" fill="#777"/>170      </svg>171    </div>172    <div class="round-btn">173      <svg class="svg" viewBox="0 0 24 24">174        <path d="M6 6h14l-2 12H8L6 6z" stroke="#333" stroke-width="2" fill="none"/>175        <circle cx="9" cy="20" r="2" fill="#333"/>176        <circle cx="17" cy="20" r="2" fill="#333"/>177      </svg>178    </div>179  </div>180 181  <!-- Content -->182  <div class="content">183    <!-- Rating line -->184    <div class="rating-line">185      <div class="stars">186        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>187        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>188        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>189        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>190        <svg class="svg" viewBox="0 0 24 24"><polygon fill="#A0E5B5" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>191      </div>192      <div class="title">Good quality product</div>193    </div>194 195    <div class="subhead">Cool</div>196 197    <div class="img-row">198      <div class="img-ph">[IMG: Box package]</div>199      <div class="img-ph">[IMG: Toolkit with tools]</div>200    </div>201 202    <div class="meta">Himanshu S..., Jambusar</div>203 204    <div class="chips">205      <div class="chip">206        <svg class="svg" viewBox="0 0 24 24"><path d="M2 13h6l1-7h6v12H6l-4-5z" fill="#666"/></svg>207        Helpful for 83208      </div>209      <div class="chip">210        <svg class="svg" viewBox="0 0 24 24"><path d="M3 5h18v12H7l-4 4V5z" fill="#666"/></svg>211        19212      </div>213    </div>214 215    <div class="verified">216      <svg class="svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#0F9D58"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"/></svg>217      Verified Purchase · Jul, 2021218    </div>219 220    <div class="section-divider"></div>221 222    <div class="review-title">223      <div class="stars">224        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>225        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>226        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>227        <svg class="svg" viewBox="0 0 24 24"><polygon class="green" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>228        <svg class="svg" viewBox="0 0 24 24"><polygon class="gray" points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>229      </div>230      Worth the money231    </div>232 233    <div class="review-text">Very nice</div>234    <div class="meta">Flipkart Cust..., Ganjam District</div>235 236    <div class="chips">237      <div class="chip">238        <svg class="svg" viewBox="0 0 24 24"><path d="M2 13h6l1-7h6v12H6l-4-5z" fill="#666"/></svg>239        Helpful for 39240      </div>241      <div class="chip">242        <svg class="svg" viewBox="0 0 24 24"><path d="M3 5h18v12H7l-4 4V5z" fill="#666"/></svg>243        16244      </div>245    </div>246 247    <div class="verified">248      <svg class="svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#0F9D58"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"/></svg>249      Verified Purchase · Apr, 2021250    </div>251 252    <div class="list-link">253      <div>All 189 reviews</div>254      <svg class="svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>255    </div>256 257    <div class="qa-header">258      <div class="qa-title">Questions and Answers</div>259      <div class="search-chip">260        <svg class="svg" viewBox="0 0 24 24">261          <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>262          <path d="M20 20l-4-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>263        </svg>264        Search265      </div>266    </div>267 268    <div class="qa-item">Q: Does the machine heat up quick??</div>269    <div class="qa-item" style="color:#333;">A: no</div>270    <div class="qa-small">Harekrushna...</div>271 272    <div class="chips" style="margin-top: 18px;">273      <div class="chip">274        <svg class="svg" viewBox="0 0 24 24"><path d="M2 13h6l1-7h6v12H6l-4-5z" fill="#666"/></svg>275        Helpful for 9276      </div>277      <div class="chip">278        <svg class="svg" viewBox="0 0 24 24"><path d="M3 5h18v12H7l-4 4V5z" fill="#666"/></svg>279        1280      </div>281    </div>282 283  </div>284 285  <!-- Floating help button -->286  <div class="floating-help">287    <div class="floating-help-inner">f</div>288  </div>289 290  <!-- Bottom purchase bar -->291  <div class="bottom-bar">292    <div class="btn small">293      <svg class="svg" viewBox="0 0 24 24">294        <path d="M6 6h14l-2 12H8L6 6z" stroke="#333" stroke-width="2" fill="none"/>295        <path d="M19 6V3M16 6V3" stroke="#333" stroke-width="2"/>296      </svg>297    </div>298    <div class="btn mid">Pay with EMI</div>299    <div class="btn primary">Buy now</div>300  </div>301 302</div>303</body>304</html>