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 UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#f1f3f5;12  }13 14  /* Top status bar */15  .statusbar {16    height:140px; background:#2c2f33; color:#fff; display:flex; align-items:center;17    padding:0 40px; font-size:42px;18  }19  .statusbar .left { flex:1; }20  .statusbar .right { display:flex; gap:30px; align-items:center; }21  .dot { width:14px; height:14px; background:#bfc4c9; border-radius:50%; display:inline-block; }22 23  /* Search/header row */24  .header {25    background:#2c2f33; padding:22px 40px 40px 40px; color:#fff;26    display:flex; align-items:center; gap:28px;27  }28  .icon-btn { width:72px; height:72px; display:flex; justify-content:center; align-items:center; border-radius:12px; }29  .searchbox {30    flex:1; background:#fff; border-radius:26px; height:100px; display:flex; align-items:center; padding:0 30px; color:#555; box-shadow:0 2px 0 rgba(0,0,0,0.15) inset;31  }32  .searchbox .placeholder { font-size:44px; color:#666; }33  .scan { width:90px; height:90px; display:flex; justify-content:center; align-items:center; }34 35  /* Product card strip (partial) */36  .product-strip {37    background:#fff; margin:0 40px; border-radius:6px; box-shadow:0 0 0 1px #e0e0e0 inset;38    overflow:hidden;39  }40  .product-info { padding:34px 32px 0 32px; font-size:44px; color:#222; }41  .price-row { display:flex; align-items:baseline; gap:22px; }42  .price { color:#e50914; font-weight:700; font-size:52px; }43  .rrp { color:#9aa0a6; text-decoration:line-through; font-size:44px; }44  .view-btn { background:#000; color:#fff; text-align:center; padding:36px 0; font-size:46px; font-weight:700; margin-top:30px; }45 46  /* Carousel nav pale area */47  .pale-nav {48    height:150px; background:#e7edf2; margin-top:24px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;49  }50 51  /* Reviews header */52  .reviews-header {53    background:#fff; display:flex; align-items:center; gap:20px; padding:36px 40px; font-size:52px; color:#2b2b2b; border-top:1px solid #e0e0e0;54  }55  .reviews-header .spacer { flex:1; }56  .reviews-card {57    margin:0; background:#efefef; padding:44px 40px 60px 40px; color:#2b2b2b;58  }59  .stars { display:flex; gap:12px; align-items:center; }60  .reviews-summary { display:flex; align-items:center; gap:32px; margin-top:20px; }61  .link { color:#000; text-decoration:underline; font-weight:700; font-size:48px; }62  .recommend { margin-top:22px; font-size:40px; color:#555; }63  .divider { height:2px; background:#2b2b2b; opacity:0.35; margin:44px 0; }64 65  .section-title { font-size:48px; font-weight:800; margin-bottom:10px; }66  .subtext { font-size:40px; color:#555; margin-bottom:26px; }67 68  .snapshot-row { display:flex; align-items:center; gap:26px; margin:26px 0; }69  .bar { flex:1; height:40px; background:#d9d9d9; border-radius:8px; overflow:hidden; }70  .fill { height:100%; background:#1e2bff; }71  .fill.w80 { width:80%; }72  .fill.w22 { width:22%; }73  .fill.w10 { width:10%; }74  .fill.w0 { width:0%; }75 76  /* Average rating segmented bars */77  .seg-row { display:flex; gap:10px; margin:16px 0 24px 120px; }78  .seg { width:140px; height:34px; background:#d9d9d9; }79  .seg.blue { background:#1e2bff; }80 81  /* Reviews list */82  .list-header { padding:40px 40px 20px 40px; font-size:40px; color:#333; }83  .review-item { padding:10px 40px 0 40px; }84  .stars.gray svg path { fill:#b5b7ba; }85  .user { font-size:44px; margin-top:20px; }86  .user a { color:#000; text-decoration:underline; font-weight:800; }87  .location { color:#555; }88 89  /* Bottom system bar */90  .sysbar { position:absolute; left:0; right:0; bottom:0; height:150px; background:#000; display:flex; align-items:center; justify-content:center; }91  .home-pill { width:240px; height:16px; background:#c7c7c7; border-radius:20px; }92 93  /* SVG defaults */94  svg { display:block; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="statusbar">102    <div class="left">8:43</div>103    <div class="right">104      <span class="dot"></span>105      <span class="dot"></span>106      <span class="dot"></span>107      <span class="dot"></span>108      <span class="dot"></span>109    </div>110  </div>111 112  <!-- Header with search -->113  <div class="header">114    <div class="icon-btn">115      <svg width="60" height="60" viewBox="0 0 24 24">116        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>117      </svg>118    </div>119    <div class="icon-btn">120      <svg width="60" height="60" viewBox="0 0 24 24">121        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#fff"/>122      </svg>123    </div>124    <div class="searchbox">125      <svg width="60" height="60" viewBox="0 0 24 24" style="margin-right:20px;">126        <circle cx="10" cy="10" r="6" fill="none" stroke="#666" stroke-width="2"/>127        <path d="M14.5 14.5 L20 20" stroke="#666" stroke-width="2" stroke-linecap="round"/>128      </svg>129      <div class="placeholder">Cycle life guard</div>130      <div class="spacer"></div>131      <div class="scan">132        <svg width="60" height="60" viewBox="0 0 24 24">133          <rect x="5" y="5" width="14" height="14" fill="none" stroke="#666" stroke-width="2"/>134          <path d="M3 8h3M3 3h5M16 3h5M18 21h3M3 16h3M3 21h5" stroke="#666" stroke-width="2"/>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Partial product card strip -->141  <div class="product-strip" style="margin-top:0;">142    <div class="product-info">143      Academy Shin Guard144      <div class="price-row" style="margin-top:16px;">145        <div class="price">£9.99</div>146        <div class="rrp">RRP £10.99</div>147      </div>148    </div>149    <div class="view-btn">VIEW PRODUCT</div>150  </div>151 152  <!-- Carousel pale nav with arrows -->153  <div class="pale-nav">154    <svg width="64" height="64" viewBox="0 0 24 24">155      <path d="M15 4 L7 12 L15 20" fill="none" stroke="#777" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>156    </svg>157    <svg width="64" height="64" viewBox="0 0 24 24">158      <path d="M9 4 L17 12 L9 20" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>159    </svg>160  </div>161 162  <!-- Reviews header -->163  <div class="reviews-header">164    <svg width="60" height="60" viewBox="0 0 24 24">165      <path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="none" stroke="#777" stroke-width="2"/>166    </svg>167    <div>Reviews</div>168    <div class="spacer"></div>169    <svg width="60" height="60" viewBox="0 0 24 24">170      <path d="M5 12h14" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>171    </svg>172  </div>173 174  <!-- Reviews content card -->175  <div class="reviews-card">176    <div class="reviews-summary">177      <div class="stars">178        <!-- 4 blue stars -->179        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#1e2bff"/></svg>180        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#1e2bff"/></svg>181        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#1e2bff"/></svg>182        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#1e2bff"/></svg>183        <!-- outlined star -->184        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="none" stroke="#1e2bff" stroke-width="2"/></svg>185      </div>186      <div class="link">10 reviews</div>187    </div>188    <div class="recommend">9 out of 10 (90%) reviewers recommend this product</div>189 190    <div class="divider"></div>191 192    <div class="section-title">RATING SNAPSHOT</div>193    <div class="subtext">Select a row below to filter reviews</div>194 195    <div class="snapshot-row">196      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#999"/></svg>197      <div class="bar"><div class="fill w80"></div></div>198    </div>199    <div class="snapshot-row">200      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#999"/></svg>201      <div class="bar"><div class="fill w22"></div></div>202    </div>203    <div class="snapshot-row">204      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#999"/></svg>205      <div class="bar"><div class="fill w0"></div></div>206    </div>207    <div class="snapshot-row">208      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#999"/></svg>209      <div class="bar"><div class="fill w0"></div></div>210    </div>211    <div class="snapshot-row">212      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z" fill="#999"/></svg>213      <div class="bar"><div class="fill w10"></div></div>214    </div>215 216    <div class="divider"></div>217 218    <div class="section-title">AVERAGE CUSTOMER RATINGS</div>219    <div class="seg-row">220      <div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg"></div>221    </div>222    <div class="seg-row">223      <div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg blue"></div><div class="seg"></div>224    </div>225  </div>226 227  <!-- Reviews list and first item preview -->228  <div class="list-header">1 to 10 of 10 Reviews</div>229 230  <div class="review-item">231    <div class="stars gray" style="display:flex; gap:12px;">232      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z"/></svg>233      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z"/></svg>234      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z"/></svg>235      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z"/></svg>236      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2 L14.4 7.5 L20 8.2 L15.5 11.9 L16.8 17.5 L12 14.6 L7.2 17.5 L8.5 11.9 L4 8.2 L9.6 7.5 Z"/></svg>237    </div>238    <div class="user"><a href="#">Julie82</a>, <span class="location">Bradford</span></div>239  </div>240 241  <!-- Bottom system bar -->242  <div class="sysbar"><div class="home-pill"></div></div>243 244</div>245</body>246</html>