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>Mobile UI - Reviews</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* General helpers */15  .row { display: flex; align-items: center; }16  .space-between { justify-content: space-between; }17  .muted { color: #6f6f6f; }18  .divider { height: 2px; background: #eee; margin: 28px 40px; }19  .section { padding: 0 40px; }20  .title { font-size: 54px; font-weight: 700; margin: 36px 40px 10px; }21  .subtitle { font-size: 46px; font-weight: 600; margin: 36px 40px 0; }22  .pill-btn {23    width: 900px; height: 120px; margin: 30px auto 0;24    border: 4px solid #1a1a1a; border-radius: 60px; font-size: 44px; font-weight: 600;25    display: flex; align-items: center; justify-content: center; color: #111; background: #fff;26  }27 28  /* Status bar */29  .status-bar { height: 120px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }30  .status-icons { display: flex; gap: 22px; align-items: center; }31  .status-icon { width: 34px; height: 34px; background: #444; border-radius: 6px; }32  .battery { width: 46px; height: 24px; border: 4px solid #444; border-radius: 6px; position: relative; }33  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 12px; background: #444; border-radius: 2px; }34 35  /* Header with search */36  .header { padding: 10px 24px 0 24px; }37  .search-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; }38  .back-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }39  .search-field {40    flex: 1; margin: 0 16px; height: 96px; background: #f2f2f2; border-radius: 48px;41    display: flex; align-items: center; padding: 0 32px; color: #777; font-size: 42px;42  }43  .header-actions { display: flex; gap: 28px; }44  .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }45 46  /* Tabs */47  .tabs { display: flex; gap: 40px; padding: 10px 40px 0; }48  .tab { font-size: 44px; color: #444; }49  .tab.active { color: #111; font-weight: 600; }50  .underline { height: 8px; width: 160px; background: #111; margin: 16px 40px; border-radius: 4px; }51 52  /* Ratings */53  .rating-line { display: flex; align-items: center; gap: 16px; }54  .rating-number { font-size: 86px; font-weight: 800; }55  .stars { font-size: 64px; letter-spacing: 6px; }56  .star-orange { color: #ff6a00; }57  .star-grey { color: #b5b5b5; }58 59  /* Reviewer block */60  .review-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }61  .reviewer { display: flex; align-items: center; gap: 16px; font-size: 46px; color: #8a8a8a; }62  .flag {63    width: 80px; height: 54px; background: #E0E0E0; border: 2px solid #BDBDBD;64    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;65  }66  .review-date { font-size: 40px; color: #8a8a8a; }67 68  .review-text { font-size: 42px; color: #333; line-height: 1.6; margin-top: 24px; }69 70  /* Store reviews bars */71  .metric { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; }72  .metric .label { font-size: 44px; color: #333; }73  .metric .value { font-size: 42px; color: #555; margin-left: 24px; }74  .bar { width: 520px; height: 18px; background: #e6e6e6; border-radius: 10px; overflow: hidden; margin: 0 24px; }75  .bar-fill { height: 100%; background: #ff6a00; border-radius: 10px; }76 77  /* Arrows right */78  .chevron-right { width: 40px; height: 40px; }79 80  /* Bottom action bar */81  .bottom-bar {82    position: absolute; left: 0; right: 0; bottom: 120px; height: 200px;83    border-top: 2px solid #eee; background: #fff; display: flex; align-items: center; justify-content: space-around;84    padding: 0 24px;85  }86  .mini { display: flex; flex-direction: column; align-items: center; gap: 10px; }87  .mini-label { font-size: 36px; color: #333; }88  .circle-btn {89    width: 360px; height: 120px; border-radius: 60px; border: 4px solid #111; display: flex; align-items: center; justify-content: center;90    font-size: 44px; font-weight: 700;91  }92  .cta-orange {93    width: 420px; height: 120px; border-radius: 60px; background: #ff6a00; color: #fff;94    display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700;95  }96 97  /* Gesture bar */98  .gesture { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 280px; height: 14px; background: #000; opacity: 0.12; border-radius: 8px; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div style="font-size: 44px; font-weight: 600;">3:52</div>107    <div class="status-icons">108      <div class="status-icon"></div>109      <div class="status-icon" style="background:#777;"></div>110      <div class="battery"></div>111    </div>112  </div>113 114  <!-- Header with search and actions -->115  <div class="header">116    <div class="search-row">117      <div class="back-btn">118        <svg width="48" height="48" viewBox="0 0 48 48">119          <path d="M28 8 L12 24 L28 40" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>120        </svg>121      </div>122      <div class="search-field">123        <svg width="44" height="44" viewBox="0 0 48 48" style="margin-right:16px;">124          <circle cx="20" cy="20" r="14" stroke="#777" stroke-width="4" fill="none"></circle>125          <line x1="32" y1="32" x2="44" y2="44" stroke="#777" stroke-width="4" stroke-linecap="round"></line>126        </svg>127        <span>nike shoes</span>128      </div>129      <div class="header-actions">130        <div class="icon-btn">131          <svg width="48" height="48" viewBox="0 0 48 48">132            <rect x="8" y="10" width="32" height="24" stroke="#111" stroke-width="4" fill="none" rx="4"></rect>133            <circle cx="24" cy="22" r="6" stroke="#111" stroke-width="4" fill="none"></circle>134          </svg>135        </div>136        <div class="icon-btn">137          <svg width="48" height="48" viewBox="0 0 48 48">138            <path d="M6 10 H14 L16 32 H38 L42 18 H18" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>139            <circle cx="20" cy="38" r="4" fill="#111"></circle>140            <circle cx="34" cy="38" r="4" fill="#111"></circle>141          </svg>142        </div>143        <div class="icon-btn">144          <svg width="48" height="48" viewBox="0 0 48 48">145            <circle cx="24" cy="10" r="4" fill="#111"></circle>146            <circle cx="24" cy="24" r="4" fill="#111"></circle>147            <circle cx="24" cy="38" r="4" fill="#111"></circle>148          </svg>149        </div>150      </div>151    </div>152  </div>153 154  <!-- Tabs -->155  <div class="tabs">156    <div class="tab active">Overview</div>157    <div class="tab">Details</div>158    <div class="tab">Recommended</div>159  </div>160  <div class="underline"></div>161 162  <!-- Reviews section -->163  <div class="title">Reviews</div>164 165  <!-- Product reviews card -->166  <div class="subtitle row space-between">167    <span>Product reviews</span>168    <svg class="chevron-right" viewBox="0 0 24 24">169      <path d="M8 4 L16 12 L8 20" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170    </svg>171  </div>172 173  <div class="section" style="margin-top: 24px;">174    <div class="rating-line">175      <div class="rating-number">4.3</div>176      <div class="stars">177        <span class="star-orange">★</span><span class="star-orange">★</span><span class="star-orange">★</span><span class="star-orange">★</span><span class="star-grey">★</span>178      </div>179    </div>180 181    <div class="review-meta">182      <div class="reviewer">183        <span>f***t</span>184        <div class="flag">[IMG: Flag]</div>185      </div>186      <div class="review-date">September 18, 2023</div>187    </div>188 189    <div class="stars" style="font-size:56px; margin-top: 16px;">190      <span class="star-orange">★</span><span class="star-orange">★</span><span class="star-orange">★</span><span class="star-orange">★</span><span class="star-orange">★</span>191    </div>192 193    <div class="review-text">194      I love everything about my order, everything I ordered came exactly as the pictures.. Thank you so195    </div>196  </div>197 198  <div class="divider"></div>199 200  <!-- Store reviews -->201  <div class="subtitle row space-between">202    <span>Store reviews</span>203    <svg class="chevron-right" viewBox="0 0 24 24">204      <path d="M8 4 L16 12 L8 20" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>205    </svg>206  </div>207 208  <div class="section" style="margin-top: 24px;">209    <div class="row" style="gap: 12px; align-items: baseline;">210      <div style="font-size: 78px; font-weight: 800;">4.3</div>211      <div style="font-size: 40px; color:#666;">/5.0</div>212      <div style="font-size: 44px; color:#333; margin-left: 12px;">Satisfied</div>213    </div>214 215    <div class="metric">216      <div class="row" style="align-items: center;">217        <div class="label">Product quality</div>218        <div class="bar"><div class="bar-fill" style="width: 98%;"></div></div>219      </div>220      <div class="value">4.9</div>221    </div>222 223    <div class="metric">224      <div class="row" style="align-items: center;">225        <div class="label">Supplier service</div>226        <div class="bar"><div class="bar-fill" style="width: 80%;"></div></div>227      </div>228      <div class="value">4.0</div>229    </div>230 231    <div class="metric">232      <div class="row" style="align-items: center;">233        <div class="label">On-time shipment</div>234        <div class="bar"><div class="bar-fill" style="width: 82%;"></div></div>235      </div>236      <div class="value">4.1</div>237    </div>238 239    <div class="pill-btn">See all reviews</div>240  </div>241 242  <div class="divider" style="margin-top: 40px;"></div>243 244  <!-- Customization options -->245  <div class="subtitle row space-between" style="margin-top: 10px;">246    <span>Customization options</span>247    <svg class="chevron-right" viewBox="0 0 24 24">248      <path d="M8 4 L16 12 L8 20" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>249    </svg>250  </div>251  <div class="section muted" style="font-size: 40px; margin-top: 16px;">252    Customized logo • Customized packaging • Graphic customization253  </div>254 255  <!-- Bottom action bar -->256  <div class="bottom-bar">257    <div class="mini">258      <svg width="56" height="56" viewBox="0 0 48 48">259        <rect x="6" y="8" width="36" height="24" stroke="#111" stroke-width="4" fill="none" rx="4"></rect>260        <path d="M10 36 L22 28 L38 36" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>261      </svg>262      <div class="mini-label">Chat now</div>263    </div>264    <div class="mini">265      <svg width="56" height="56" viewBox="0 0 48 48">266        <path d="M6 12 L24 26 L42 12 V36 H6 Z" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>267      </svg>268      <div class="mini-label">Send inquiry</div>269    </div>270    <div class="circle-btn">Add to cart</div>271    <div class="cta-orange">Start order</div>272  </div>273 274  <div class="gesture"></div>275</div>276</body>277</html>