GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Reviews UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .statusbar {18    height: 90px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #111;24    font-size: 32px;25  }26  .status-right {27    display: flex;28    align-items: center;29    gap: 24px;30  }31 32  /* App bar */33  .appbar {34    height: 120px;35    padding: 0 24px;36    display: flex;37    align-items: center;38    border-bottom: 1px solid #e9e9e9;39  }40  .back-btn {41    width: 72px;42    height: 72px;43    display: flex;44    align-items: center;45    justify-content: center;46    margin-right: 16px;47  }48  .app-title {49    font-size: 44px;50    color: #222;51    font-weight: 600;52  }53 54  /* Scroll content area */55  .content {56    position: absolute;57    top: 210px; /* 90 + 120 */58    left: 0;59    right: 0;60    bottom: 250px; /* space for bottom actions */61    overflow-y: auto;62    padding: 24px 24px 100px 24px;63  }64 65  /* Review item */66  .review {67    margin: 24px 0 60px 0;68  }69  .review-head {70    display: flex;71    align-items: center;72    gap: 24px;73    margin-bottom: 8px;74  }75  .avatar {76    width: 100px;77    height: 100px;78    background: #4B6CF6;79    color: #fff;80    border-radius: 50%;81    font-weight: 700;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 48px;86  }87  .name-date {88    display: flex;89    flex-direction: column;90    gap: 6px;91  }92  .name {93    font-size: 36px;94    color: #444;95    font-weight: 600;96  }97  .date {98    font-size: 30px;99    color: #888;100  }101 102  .quote-block {103    margin-left: 148px; /* indent beneath avatar */104    border-left: 3px solid #E5E5E5;105    padding-left: 24px;106    margin-top: 20px;107  }108 109  .stars {110    display: flex;111    gap: 10px;112    margin-bottom: 18px;113  }114  .review-text {115    font-size: 36px;116    color: #333;117    line-height: 1.55;118    margin-bottom: 24px;119    max-width: 950px;120  }121 122  .product-link {123    background: #f4f4f4;124    border-radius: 24px;125    border: 1px solid #e1e1e1;126    display: flex;127    align-items: center;128    padding: 16px;129    gap: 16px;130    max-width: 920px;131  }132  .img-ph {133    width: 140px;134    height: 140px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 16px;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #757575;142    font-size: 26px;143    text-align: center;144    padding: 10px;145  }146  .product-text {147    color: #9b9b9b;148    font-size: 34px;149    white-space: nowrap;150    overflow: hidden;151    text-overflow: ellipsis;152  }153 154  /* Bottom actions */155  .bottom-bar {156    position: absolute;157    left: 0;158    right: 0;159    bottom: 0;160    height: 250px;161    background: #fff;162    border-top: 1px solid #e9e9e9;163    display: flex;164    align-items: center;165    justify-content: space-around;166    padding: 0 24px;167  }168  .btn {169    height: 120px;170    border-radius: 60px;171    font-size: 36px;172    padding: 0 50px;173    display: flex;174    align-items: center;175    justify-content: center;176    font-weight: 700;177    white-space: nowrap;178  }179  .btn-outline {180    background: #fff;181    color: #222;182    border: 4px solid #1f1f1f;183    min-width: 300px;184  }185  .btn-orange {186    background: #FF7A00;187    color: #fff;188    border: none;189    min-width: 320px;190  }191 192  /* Floating help icon near bottom-right of content */193  .help-fab {194    position: absolute;195    right: 28px;196    bottom: 290px;197    width: 100px;198    height: 100px;199    border-radius: 50%;200    border: 1px solid #d9d9d9;201    background: #fff;202    display: flex;203    align-items: center;204    justify-content: center;205  }206 207  /* Gesture bar indicator */208  .gesture-bar {209    position: absolute;210    left: 50%;211    transform: translateX(-50%);212    bottom: 10px;213    width: 360px;214    height: 14px;215    background: #111;216    border-radius: 8px;217    opacity: 0.9;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status Bar -->225  <div class="statusbar">226    <div>3:57</div>227    <div class="status-right">228      <!-- Wi-Fi icon -->229      <svg width="42" height="42" viewBox="0 0 24 24">230        <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>231        <path d="M5 11c4-3 10-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>232        <path d="M8 14c3-2 5-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>233        <circle cx="12" cy="18" r="1.8" fill="#444"/>234      </svg>235      <!-- Battery icon -->236      <svg width="42" height="42" viewBox="0 0 24 24">237        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#444" stroke-width="2" fill="none"/>238        <rect x="4" y="8" width="12" height="8" fill="#444"/>239        <rect x="20" y="9" width="2" height="6" fill="#444"/>240      </svg>241    </div>242  </div>243 244  <!-- App Bar -->245  <div class="appbar">246    <div class="back-btn">247      <svg width="48" height="48" viewBox="0 0 24 24">248        <path d="M15 19L8 12l7-7" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249      </svg>250    </div>251    <div class="app-title">Reviews</div>252  </div>253 254  <!-- Main Content -->255  <div class="content">256 257    <!-- Review 1 -->258    <div class="review">259      <div class="review-head">260        <div class="avatar">f</div>261        <div class="name-date">262          <div class="name">f***t</div>263          <div class="date">Sep 18, 2023</div>264        </div>265      </div>266      <div class="quote-block">267        <div class="stars">268          <!-- 5 orange stars -->269          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>270          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>271          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>272          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>273          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>274        </div>275        <div class="review-text">276          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.277        </div>278        <div class="product-link">279          <div class="img-ph">[IMG: Pink Slip-on Shoe]</div>280          <div class="product-text">723 Slip on Shoes Flat Manufacturer ...</div>281        </div>282      </div>283    </div>284 285    <!-- Review 2 -->286    <div class="review">287      <div class="review-head">288        <div class="avatar">f</div>289        <div class="name-date">290          <div class="name">f***t</div>291          <div class="date">Sep 18, 2023</div>292        </div>293      </div>294      <div class="quote-block">295        <div class="stars">296          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>297          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>298          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>299          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>300          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>301        </div>302        <div class="review-text">303          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.304        </div>305        <div class="product-link">306          <div class="img-ph">[IMG: Pink Sport Shoe]</div>307          <div class="product-text">007W Women Sport Shoes Rubber Lace ...</div>308        </div>309      </div>310    </div>311 312    <!-- Review 3 -->313    <div class="review">314      <div class="review-head">315        <div class="avatar">f</div>316        <div class="name-date">317          <div class="name">f***t</div>318          <div class="date">Sep 18, 2023</div>319        </div>320      </div>321      <div class="quote-block">322        <div class="stars">323          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>324          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>325          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>326          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>327          <svg width="38" height="38" viewBox="0 0 20 20"><polygon points="10,1 12.9,6.9 19.5,7.2 14.5,11.2 16.3,17.8 10,14.3 3.7,17.8 5.5,11.2 0.5,7.2 7.1,6.9" fill="#FF6D00"/></svg>328        </div>329        <div class="review-text">330          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.331        </div>332        <div class="product-link">333          <div class="img-ph">[IMG: Fashion Sneakers]</div>334          <div class="product-text">813 New design dazzling gradient color ...</div>335        </div>336      </div>337    </div>338 339    <!-- Floating help button (placeholder icon) -->340    <div class="help-fab">341      <svg width="44" height="44" viewBox="0 0 24 24">342        <circle cx="12" cy="12" r="10" stroke="#bdbdbd" stroke-width="2" fill="none"/>343        <path d="M9 9a3 3 0 0 1 6 0c0 2-3 2-3 4" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round"/>344        <circle cx="12" cy="17" r="1.5" fill="#9a9a9a"/>345      </svg>346    </div>347 348  </div>349 350  <!-- Bottom action buttons -->351  <div class="bottom-bar">352    <div class="btn btn-outline">Chat now</div>353    <div class="btn btn-orange">Send inquiry</div>354    <div class="btn btn-orange">Start order</div>355  </div>356 357  <!-- Gesture bar -->358  <div class="gesture-bar"></div>359 360</div>361</body>362</html>