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: Arial, Helvetica, sans-serif; color:#222; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #333;29    font-size: 34px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .status-icon {37    width: 36px;38    height: 36px;39  }40 41  /* Header */42  .app-bar {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    height: 150px;48    display: flex;49    align-items: center;50    gap: 16px;51    padding: 0 32px;52    background: #fff;53    box-shadow: 0 2px 0 rgba(0,0,0,0.06);54  }55  .back-btn {56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .app-title {63    font-size: 50px;64    font-weight: 600;65    color: #333;66  }67 68  /* Content */69  .content {70    position: absolute;71    top: 240px;72    left: 0;73    width: 1080px;74    height: 1840px;75    padding: 20px 40px 280px;76    overflow: hidden;77  }78 79  .review {80    margin: 40px 0 20px;81  }82  .user-row {83    display: flex;84    align-items: center;85    gap: 24px;86    margin-bottom: 12px;87  }88  .avatar {89    width: 90px;90    height: 90px;91    border-radius: 50%;92    background: #5C74FF;93  }94  .user-info {95    display: flex;96    flex-direction: column;97  }98  .user-name {99    font-size: 36px;100    color: #666;101  }102  .date {103    font-size: 30px;104    color: #9E9E9E;105    margin-top: 4px;106  }107 108  .card {109    border-left: 4px solid #EAEAEA;110    padding-left: 28px;111    margin-top: 20px;112  }113  .stars {114    display: flex;115    gap: 8px;116    margin-bottom: 20px;117  }118  .star {119    width: 40px;120    height: 40px;121  }122  .review-text {123    font-size: 38px;124    line-height: 1.6;125    color: #333;126    margin-bottom: 26px;127  }128 129  .product-chip {130    display: flex;131    align-items: center;132    gap: 24px;133    background: #F4F4F4;134    border-radius: 26px;135    padding: 18px 24px;136    position: relative;137    border: 1px solid #ECECEC;138    width: 960px;139  }140  .img-placeholder {141    width: 120px;142    height: 120px;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    border-radius: 18px;146    display: flex;147    justify-content: center;148    align-items: center;149    color: #757575;150    font-size: 26px;151    text-align: center;152  }153  .product-text {154    font-size: 34px;155    color: #666;156    white-space: nowrap;157    overflow: hidden;158    text-overflow: ellipsis;159    max-width: 740px;160  }161  .chip-overlay {162    position: absolute;163    right: 18px;164    top: 18px;165    width: 84px;166    height: 84px;167    background: #fff;168    border: 1px solid #E0E0E0;169    border-radius: 50%;170    display: flex;171    align-items: center;172    justify-content: center;173    color: #999;174    font-size: 36px;175  }176 177  /* Bottom action bar */178  .bottom-bar {179    position: absolute;180    left: 0;181    bottom: 90px;182    width: 1080px;183    height: 240px;184    background: #fff;185    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);186    display: flex;187    align-items: center;188    justify-content: space-between;189    padding: 0 40px;190  }191  .btn {192    height: 140px;193    border-radius: 80px;194    padding: 0 64px;195    font-size: 40px;196    font-weight: 600;197    display: flex;198    align-items: center;199    justify-content: center;200    letter-spacing: 0.2px;201  }202  .btn-outline {203    background: #fff;204    border: 4px solid #222;205    color: #222;206  }207  .btn-primary {208    background: #FF7A00;209    color: #fff;210    border: none;211  }212 213  /* Gesture bar */214  .gesture {215    position: absolute;216    bottom: 20px;217    left: 50%;218    transform: translateX(-50%);219    width: 360px;220    height: 12px;221    background: #000;222    border-radius: 10px;223    opacity: 0.8;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <!-- Status Bar -->231  <div class="status-bar">232    <div>3:53</div>233    <div class="status-right">234      <!-- simple mail icon -->235      <svg class="status-icon" viewBox="0 0 24 24">236        <path d="M2 6h20v12H2z" fill="none" stroke="#555" stroke-width="2"/>237        <path d="M2 6l10 7 10-7" fill="none" stroke="#555" stroke-width="2"/>238      </svg>239      <!-- signal icon -->240      <svg class="status-icon" viewBox="0 0 24 24">241        <path d="M3 18h2M7 14h2M11 10h2M15 6h2" stroke="#555" stroke-width="2" stroke-linecap="round"/>242      </svg>243      <!-- battery icon -->244      <svg class="status-icon" viewBox="0 0 24 24">245        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>246        <rect x="21" y="9" width="2" height="6" fill="#555"/>247        <rect x="4" y="8" width="12" height="8" fill="#555"/>248      </svg>249    </div>250  </div>251 252  <!-- App Bar -->253  <div class="app-bar">254    <div class="back-btn">255      <svg width="44" height="44" viewBox="0 0 24 24">256        <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>257      </svg>258    </div>259    <div class="app-title">Reviews</div>260  </div>261 262  <!-- Content -->263  <div class="content">264 265    <!-- Review 1 -->266    <div class="review">267      <div class="user-row">268        <div class="avatar"></div>269        <div class="user-info">270          <div class="user-name">f***t</div>271          <div class="date">Sep 18, 2023</div>272        </div>273      </div>274      <div class="card">275        <div class="stars">276          <!-- five orange stars -->277          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>278          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>279          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>280          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>281          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>282        </div>283        <div class="review-text">284          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.285        </div>286        <div class="product-chip">287          <div class="img-placeholder">[IMG: Pink Shoe]</div>288          <div class="product-text">723 Slip on Shoes Flat Manufacturer …</div>289        </div>290      </div>291    </div>292 293    <!-- Review 2 -->294    <div class="review">295      <div class="user-row">296        <div class="avatar"></div>297        <div class="user-info">298          <div class="user-name">f***t</div>299          <div class="date">Sep 18, 2023</div>300        </div>301      </div>302      <div class="card">303        <div class="stars">304          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>305          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>306          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>307          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>308          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>309        </div>310        <div class="review-text">311          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.312        </div>313        <div class="product-chip">314          <div class="img-placeholder">[IMG: Pink Sneaker]</div>315          <div class="product-text">007W Women Sport Shoes Rubber Lace …</div>316        </div>317      </div>318    </div>319 320    <!-- Review 3 -->321    <div class="review">322      <div class="user-row">323        <div class="avatar"></div>324        <div class="user-info">325          <div class="user-name">f***t</div>326          <div class="date">Sep 18, 2023</div>327        </div>328      </div>329      <div class="card">330        <div class="stars">331          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>332          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>333          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>334          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>335          <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7.1-6.3-3.3-6.3 3.3 1.2-7.1-5-4.9 7-1z" fill="#FF7A00"/></svg>336        </div>337        <div class="review-text">338          I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.339        </div>340        <div class="product-chip">341          <div class="img-placeholder">[IMG: Water Sports Shoes]</div>342          <div class="product-text">1616 Water Sports Shoes Barefoot Ai …</div>343          <div class="chip-overlay">?</div>344        </div>345      </div>346    </div>347 348  </div>349 350  <!-- Bottom Action Bar -->351  <div class="bottom-bar">352    <div class="btn btn-outline" style="width: 300px;">Chat now</div>353    <div class="btn btn-primary" style="width: 340px;">Send inquiry</div>354    <div class="btn btn-primary" style="width: 320px;">Start order</div>355  </div>356 357  <!-- Gesture Bar -->358  <div class="gesture"></div>359</div>360</body>361</html>