GD-ML/AndroidCode
13.4k
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>Product Reviews 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: #ffffff;12 color: #111;13 }14 15 /* Header */16 .header {17 height: 240px;18 background: linear-gradient(180deg, #95e0d7 0%, #b7e8f5 100%);19 padding: 24px 32px 16px 32px;20 box-sizing: border-box;21 }22 .status-bar {23 display: flex; align-items: center; justify-content: space-between;24 color: #1b1b1b; font-size: 36px;25 }26 .status-icons { display: flex; gap: 18px; align-items: center; }27 .search-row {28 display: flex; align-items: center; gap: 20px; margin-top: 20px;29 }30 .icon-btn {31 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #111;32 }33 .searchbox {34 flex: 1; height: 96px; background: #fff; border-radius: 24px;35 box-shadow: 0 6px 14px rgba(0,0,0,0.15); display: flex; align-items: center;36 padding: 0 24px; box-sizing: border-box;37 }38 .searchbox .placeholder { color: #444; font-size: 36px; margin-left: 12px; flex: 1; }39 .chip {40 width: 72px; height: 72px; border-radius: 18px; background: #eef5f8; display: flex; align-items: center; justify-content: center;41 }42 43 /* Sub bar */44 .subbar {45 background: #f3f4f6;46 padding: 24px 32px;47 font-size: 36px; color: #333;48 border-bottom: 1px solid #e3e5e8;49 }50 .subbar b { font-weight: 700; }51 52 /* Content */53 .content { padding: 32px; }54 .section-title { font-size: 56px; font-weight: 800; margin: 24px 0 10px 0; }55 .row { display: flex; align-items: center; justify-content: space-between; }56 .stars { display: inline-flex; gap: 6px; vertical-align: middle; }57 .rating-text { font-size: 36px; margin-left: 14px; color: #222; }58 .link { color: #0077b6; font-size: 36px; text-decoration: none; }59 .muted { color: #6b7280; font-size: 34px; margin: 8px 0 24px; }60 61 /* Rating breakdown */62 .breakdown { margin-top: 12px; }63 .rating-row {64 display: grid; grid-template-columns: 120px 1fr 100px; align-items: center;65 gap: 20px; margin: 16px 0;66 font-size: 36px; color: #007185;67 }68 .bar {69 height: 42px; background: #e5e7eb; border-radius: 12px; position: relative; overflow: hidden;70 border: 1px solid #d8dadd;71 }72 .bar .fill {73 position: absolute; left: 0; top: 0; bottom: 0; background: #f6991a;74 border-right: 1px solid rgba(0,0,0,0.15);75 }76 .percent { text-align: right; color: #6b7280; }77 78 .calc { margin: 18px 0 26px; color: #007185; font-size: 36px; display: flex; align-items: center; gap: 12px; }79 .caret { transform: rotate(0deg); }80 81 /* Image reviews card */82 .image-card {83 border: 1px solid #e6e6e6; border-radius: 24px; padding: 28px; box-sizing: border-box; background: #fff;84 }85 .image-card .title { font-size: 44px; font-weight: 800; margin-bottom: 16px; }86 .thumbs { display: flex; align-items: center; gap: 20px; }87 .img-ph {88 width: 170px; height: 170px; background: #E0E0E0; border: 1px solid #BDBDBD;89 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; border-radius: 12px;90 }91 .next-btn {92 margin-left: auto; width: 72px; height: 72px; border-radius: 36px;93 border: 1px solid #d6d6d6; display: flex; align-items: center; justify-content: center;94 background: #fff;95 }96 97 .controls {98 display: flex; align-items: center; justify-content: space-between;99 margin: 26px 0 12px;100 }101 .pill {102 background: #f2f4f6; border-radius: 18px; padding: 20px 26px; font-size: 36px; color: #111;103 display: inline-flex; align-items: center; gap: 12px; border: 1px solid #e1e3e6;104 box-shadow: 0 2px 6px rgba(0,0,0,0.06);105 }106 107 .stats { color: #4b5563; font-size: 34px; margin: 10px 0 24px; }108 .divider { height: 1px; background: #e5e7eb; margin: 20px 0 24px; }109 110 .region { font-size: 42px; font-weight: 800; margin: 10px 0 18px; }111 112 /* Review item */113 .review {114 display: flex; gap: 18px; align-items: flex-start; padding-right: 16px;115 }116 .avatar {117 width: 84px; height: 84px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;118 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;119 }120 .review .name { font-size: 36px; font-weight: 700; color: #222; }121 .verified { color: #d97706; font-size: 28px; margin-left: 12px; font-weight: 700; }122 .starline { margin-top: 8px; display: flex; gap: 6px; }123 124 /* Bottom nav */125 .bottom-nav {126 position: absolute; left: 0; right: 0; bottom: 78px; height: 120px; background: #fff;127 border-top: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-around;128 }129 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 26px; color: #3b3b3b; }130 .gesture {131 position: absolute; left: 50%; transform: translateX(-50%);132 bottom: 24px; width: 360px; height: 14px; border-radius: 8px; background: #cfcfcf;133 }134 135 /* Utility small svg sizing */136 svg { display: block; }137</style>138</head>139<body>140<div id="render-target">141 <!-- Header -->142 <div class="header">143 <div class="status-bar">144 <div>3:50</div>145 <div class="status-icons">146 <!-- simple wifi -->147 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#222" d="M12 20l2-2h-4l2 2zm6-6l-1.4-1.4a7 7 0 0 0-9.2 0L6 14a9 9 0 0 1 12 0zM20 10l-1.4-1.4a11 11 0 0 0-13.2 0L4 10a13 13 0 0 1 16 0z"/></svg>148 <!-- battery -->149 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#222" d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10zM6 9v6h10V9H6z"/></svg>150 </div>151 </div>152 <div class="search-row">153 <div class="icon-btn">154 <!-- back arrow -->155 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#111" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>156 </div>157 <div class="searchbox">158 <!-- search icon -->159 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#6b7280" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>160 <div class="placeholder">chair</div>161 <div class="chip" title="scan">162 <!-- simple square-scan -->163 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#0b6" d="M7 3h3v2H7v3H5V3h2zm9 0h3v5h-2V5h-3V3h2zM7 19h3v2H7a2 2 0 0 1-2-2v-3h2v3zm12-5v3a2 2 0 0 1-2 2h-3v-2h3v-3h2z"/></svg>164 </div>165 </div>166 </div>167 </div>168 169 <!-- Product name / breadcrumb -->170 <div class="subbar">171 <span>› <b>Ikea Italian Chair (Wood , Black)</b></span>172 </div>173 174 <!-- Main content -->175 <div class="content">176 <div class="section-title">Customer reviews</div>177 <div class="row">178 <div>179 <span class="stars">180 <!-- 4 full + 1 half visual -->181 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>182 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>183 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>184 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>185 <svg width="40" height="40" viewBox="0 0 24 24"><defs><linearGradient id="half"><stop offset="50%" stop-color="#ff9900"/><stop offset="50%" stop-color="#e5e7eb"/></linearGradient></defs><path fill="url(#half)" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>186 </span>187 <span class="rating-text">4.2 out of 5</span>188 </div>189 <a class="link" href="#">Write a review</a>190 </div>191 <div class="muted">2,741 global ratings</div>192 193 <div class="breakdown">194 <div class="rating-row">195 <div>5 star</div>196 <div class="bar"><div class="fill" style="width:58%;"></div></div>197 <div class="percent">58%</div>198 </div>199 <div class="rating-row">200 <div>4 star</div>201 <div class="bar"><div class="fill" style="width:22%;"></div></div>202 <div class="percent">22%</div>203 </div>204 <div class="rating-row">205 <div>3 star</div>206 <div class="bar"><div class="fill" style="width:10%;"></div></div>207 <div class="percent">10%</div>208 </div>209 <div class="rating-row">210 <div>2 star</div>211 <div class="bar"><div class="fill" style="width:3%;"></div></div>212 <div class="percent">3%</div>213 </div>214 <div class="rating-row">215 <div>1 star</div>216 <div class="bar"><div class="fill" style="width:7%;"></div></div>217 <div class="percent">7%</div>218 </div>219 </div>220 221 <div class="calc">222 <svg class="caret" width="36" height="36" viewBox="0 0 24 24"><path fill="#111" d="M7 10l5 5 5-5z"/></svg>223 <span>How are ratings calculated?</span>224 </div>225 226 <div class="image-card">227 <div class="title">Reviews with images</div>228 <div class="thumbs">229 <div class="img-ph">[IMG: Chair close-up]</div>230 <div class="img-ph">[IMG: Chair at desk]</div>231 <div class="img-ph">[IMG: White chair side]</div>232 <div class="img-ph">[IMG: Leg cap]</div>233 <div class="next-btn">234 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#111" d="M10 6l6 6-6 6z"/></svg>235 </div>236 </div>237 </div>238 239 <div class="controls">240 <div class="pill">241 <span>Top reviews</span>242 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#111" d="M7 10l5 5 5-5z"/></svg>243 </div>244 <a class="link" href="#">Filter »</a>245 </div>246 247 <div class="stats">2,741 total ratings, 618 with reviews</div>248 249 <div class="divider"></div>250 251 <div class="region">From India</div>252 253 <div class="review">254 <div class="avatar">Avatar</div>255 <div>256 <div><span class="name">WJ Johan</span></div>257 <div class="starline">258 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>259 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>260 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>261 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>262 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3 6.8 20l1-5.8L3 9.2l5.9-.9L12 3l3.1 5.3 5.9.9-4.8 5 1 5.8z"/></svg>263 <span class="verified">Verified Purchase</span>264 </div>265 </div>266 </div>267 268 <div style="height: 560px;"></div> <!-- spacer to keep bottom bar visible over content -->269 </div>270 271 <!-- Bottom navigation bar -->272 <div class="bottom-nav">273 <div class="nav-item">274 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#0ea5a3" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>275 <span>Home</span>276 </div>277 <div class="nav-item">278 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#444" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/></svg>279 <span>Account</span>280 </div>281 <div class="nav-item">282 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#444" d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/></svg>283 <span>Orders</span>284 </div>285 <div class="nav-item">286 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#444" d="M7 6h14l-1.5 9h-11L7 6zm-2 0H3V4h3l3.6 9.6-1.1 2.4H18v2H7l2-4.5L5 6z"/></svg>287 <span>Cart (0)</span>288 </div>289 <div class="nav-item">290 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#444" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>291 <span>Menu</span>292 </div>293 </div>294 <div class="gesture"></div>295</div>296</body>297</html>