GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Reviews UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Top system/status bar */18 .status-bar {19 height: 120px;20 background: #262b2f;21 color: #e9ecef;22 display: flex;23 align-items: center;24 padding: 0 28px;25 box-sizing: border-box;26 font-size: 32px;27 }28 .status-time { font-weight: 600; margin-right: 20px; }29 .status-icons { margin-left: auto; opacity: .9; }30 31 /* App header with search */32 .app-header {33 height: 130px;34 background: #2e3338;35 display: flex;36 align-items: center;37 padding: 0 28px;38 box-sizing: border-box;39 gap: 24px;40 }41 .icon-btn {42 width: 64px;43 height: 64px;44 display: flex;45 align-items: center;46 justify-content: center;47 color: #fff;48 }49 .search-wrap {50 flex: 1;51 height: 84px;52 background: #ffffff;53 border-radius: 18px;54 display: flex;55 align-items: center;56 padding: 0 22px;57 box-sizing: border-box;58 gap: 16px;59 }60 .search-input {61 border: none;62 outline: none;63 font-size: 34px;64 width: 100%;65 color: #222;66 }67 .search-input::placeholder { color: #777; }68 .barcode {69 width: 64px; height: 64px; border-radius: 12px; background: #f1f3f5;70 display: flex; align-items: center; justify-content: center;71 }72 73 /* Content */74 .content { padding-bottom: 120px; }75 .btn-view {76 margin: 30px auto 16px;77 width: 920px;78 height: 120px;79 background: #000;80 color: #fff;81 font-weight: 700;82 font-size: 44px;83 letter-spacing: 1px;84 border-radius: 6px;85 display: flex; align-items: center; justify-content: center;86 }87 88 .carousel-nav {89 height: 120px;90 background: #eef0f2;91 display: flex;92 align-items: center;93 justify-content: space-between;94 padding: 0 40px;95 color: #222;96 }97 98 .section {99 padding: 34px 48px;100 box-sizing: border-box;101 }102 .section-header {103 display: flex; align-items: center;104 justify-content: space-between;105 margin-bottom: 18px;106 }107 .section-title {108 display: flex; align-items: center; gap: 18px;109 font-size: 48px; font-weight: 700;110 }111 .collapse-icon { color: #6b6f76; }112 113 .stars-row { display: flex; align-items: center; gap: 18px; }114 .filled-stars svg { fill: #1428ff; }115 .link { color: #0a52ff; text-decoration: none; font-weight: 600; font-size: 36px; }116 .muted { color: #5a5f66; font-size: 34px; margin-top: 18px; }117 118 .divider { height: 2px; background: #d8dadd; margin: 28px 0; }119 120 .subhead { font-size: 40px; font-weight: 800; margin: 14px 0 8px; }121 .helptext { color: #5a5f66; font-size: 32px; margin-bottom: 22px; }122 123 .snapshot-row {124 display: flex; align-items: center; gap: 22px;125 margin: 18px 0;126 }127 .bar {128 flex: 1;129 height: 32px;130 background: #e7e9ec;131 border-radius: 4px;132 overflow: hidden;133 }134 .bar .fill {135 height: 100%;136 background: #1527ff;137 width: 18%;138 }139 .bar .fill.none { width: 0; }140 .bar .fill.full { width: 85%; }141 142 .avg-grid { margin-top: 20px; }143 .avg-row { display: flex; gap: 18px; margin: 10px 0; }144 .blue-block {145 height: 40px; width: 190px; background: #1527ff; border-radius: 3px;146 }147 148 .results-count { font-size: 34px; margin: 24px 0 10px; }149 150 .review {151 padding-bottom: 22px;152 }153 .review .userline { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }154 .username { color: #0a52ff; font-weight: 700; text-decoration: underline; font-size: 36px; }155 .location { color: #222; font-size: 34px; }156 .timeago { color: #8a8f96; font-size: 32px; font-style: italic; margin-top: 8px; }157 .review-title { margin-top: 24px; font-size: 44px; font-weight: 800; }158 159 /* Home indicator */160 .home-indicator {161 position: absolute;162 bottom: 18px; left: 50%;163 transform: translateX(-50%);164 width: 560px; height: 14px; background: #cfcfcf; border-radius: 8px;165 }166 /* Utility icons */167 .icon svg { width: 48px; height: 48px; }168 .star-24 svg { width: 36px; height: 36px; }169 .star-30 svg { width: 44px; height: 44px; }170 .gray svg { fill: #8b8f95; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status bar -->177 <div class="status-bar">178 <div class="status-time">12:23</div>179 <div class="status-icons">● ○ ▮</div>180 </div>181 182 <!-- App header -->183 <div class="app-header">184 <div class="icon-btn">185 <!-- Hamburger -->186 <svg viewBox="0 0 24 24" fill="#fff">187 <rect x="3" y="5" width="18" height="2"></rect>188 <rect x="3" y="11" width="18" height="2"></rect>189 <rect x="3" y="17" width="18" height="2"></rect>190 </svg>191 </div>192 <div class="search-wrap">193 <div class="icon">194 <!-- Search icon -->195 <svg viewBox="0 0 24 24" fill="#6c757d">196 <circle cx="10" cy="10" r="7" stroke="#6c757d" stroke-width="2" fill="none"></circle>197 <line x1="15" y1="15" x2="21" y2="21" stroke="#6c757d" stroke-width="2"></line>198 </svg>199 </div>200 <input class="search-input" value="Yonex Badminton Racket" />201 <div class="barcode">202 <!-- Simple barcode square -->203 <svg viewBox="0 0 24 24" width="30" height="30">204 <rect x="3" y="3" width="6" height="2" fill="#333"/>205 <rect x="9" y="3" width="2" height="2" fill="#333"/>206 <rect x="13" y="3" width="6" height="2" fill="#333"/>207 <rect x="3" y="7" width="2" height="10" fill="#333"/>208 <rect x="6" y="7" width="1" height="10" fill="#333"/>209 <rect x="9" y="7" width="2" height="10" fill="#333"/>210 <rect x="13" y="7" width="1" height="10" fill="#333"/>211 <rect x="16" y="7" width="2" height="10" fill="#333"/>212 <rect x="21" y="7" width="0.5" height="10" fill="#333"/>213 </svg>214 </div>215 </div>216 </div>217 218 <div class="content">219 <div class="btn-view">VIEW PRODUCT</div>220 221 <div class="carousel-nav">222 <!-- Left arrow -->223 <div class="icon">224 <svg viewBox="0 0 24 24" fill="#111">225 <polyline points="15,5 8,12 15,19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>226 </svg>227 </div>228 <!-- Right arrow -->229 <div class="icon">230 <svg viewBox="0 0 24 24" fill="#111">231 <polyline points="9,5 16,12 9,19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>232 </svg>233 </div>234 </div>235 236 <div class="section">237 <div class="section-header">238 <div class="section-title">239 <div class="icon gray">240 <!-- star outline -->241 <svg viewBox="0 0 24 24" fill="none" stroke="#6b6f76" stroke-width="2">242 <polygon points="12,3 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon>243 </svg>244 </div>245 <div>Reviews</div>246 </div>247 <div class="collapse-icon icon gray">248 <!-- minus icon -->249 <svg viewBox="0 0 24 24" fill="#6b6f76">250 <rect x="5" y="11" width="14" height="2"></rect>251 </svg>252 </div>253 </div>254 255 <div class="stars-row">256 <div class="filled-stars star-30">257 <!-- 5 filled stars -->258 <svg viewBox="0 0 120 24">259 <g fill="#1428ff">260 <polygon points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>261 <polygon transform="translate(24,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>262 <polygon transform="translate(48,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>263 <polygon transform="translate(72,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>264 <polygon transform="translate(96,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>265 </g>266 </svg>267 </div>268 <a class="link" href="#">1 reviews</a>269 </div>270 <div class="muted">1 out of 1 (100%) reviewers recommend this product</div>271 272 <div class="divider"></div>273 274 <div class="subhead">RATING SNAPSHOT</div>275 <div class="helptext">Select a row below to filter reviews</div>276 277 <!-- snapshot rows -->278 <div class="snapshot-row">279 <div class="star-24">280 <svg viewBox="0 0 24 24" fill="#6b6f76">281 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>282 </svg>283 </div>284 <div class="bar"><div class="fill" style="width:22%"></div></div>285 </div>286 287 <div class="snapshot-row">288 <div class="star-24">289 <svg viewBox="0 0 24 24" fill="#6b6f76">290 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>291 </svg>292 </div>293 <div class="bar"><div class="fill none"></div></div>294 </div>295 296 <div class="snapshot-row">297 <div class="star-24">298 <svg viewBox="0 0 24 24" fill="#6b6f76">299 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>300 </svg>301 </div>302 <div class="bar"><div class="fill none"></div></div>303 </div>304 305 <div class="snapshot-row">306 <div class="star-24">307 <svg viewBox="0 0 24 24" fill="#6b6f76">308 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>309 </svg>310 </div>311 <div class="bar"><div class="fill none"></div></div>312 </div>313 314 <div class="snapshot-row">315 <div class="star-24">316 <svg viewBox="0 0 24 24" fill="#6b6f76">317 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>318 </svg>319 </div>320 <div class="bar"><div class="fill none"></div></div>321 </div>322 323 <div class="divider"></div>324 325 <div class="subhead">AVERAGE CUSTOMER RATINGS</div>326 327 <div class="avg-grid">328 <div class="avg-row">329 <div class="blue-block"></div>330 <div class="blue-block"></div>331 <div class="blue-block"></div>332 <div class="blue-block"></div>333 <div class="blue-block" style="width:150px"></div>334 </div>335 <div class="avg-row">336 <div class="blue-block" style="width:180px"></div>337 <div class="blue-block" style="width:160px"></div>338 <div class="blue-block" style="width:190px"></div>339 <div class="blue-block" style="width:180px"></div>340 <div class="blue-block" style="width:160px"></div>341 </div>342 </div>343 344 <div class="results-count">1 to 1 of 1 Reviews</div>345 346 <div class="review">347 <div class="stars-row">348 <div class="star-30 gray">349 <!-- 5 gray stars -->350 <svg viewBox="0 0 120 24">351 <g fill="#8b8f95">352 <polygon points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>353 <polygon transform="translate(24,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>354 <polygon transform="translate(48,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>355 <polygon transform="translate(72,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>356 <polygon transform="translate(96,0)" points="12,1 15,9 23,9 17,14 19,22 12,17.5 5,22 7,14 1,9 9,9"></polygon>357 </g>358 </svg>359 </div>360 </div>361 362 <div class="userline">363 <span class="username">Slippery.</span>364 <span class="location">Evesham</span>365 </div>366 <div class="timeago">a year ago</div>367 368 <div class="review-title">Great upgrade</div>369 </div>370 </div>371 </div>372 373 <div class="home-indicator"></div>374</div>375</body>376</html>