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>Reviews Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16 color: #111111;17 }18 /* Header gradient and status */19 .header {20 width: 100%;21 background: linear-gradient(90deg, #98e1e2 0%, #bfead6 100%);22 padding-bottom: 18px;23 box-sizing: border-box;24 }25 .status-bar {26 height: 56px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 8px 32px;31 font-size: 28px;32 color: #1b1b1b;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .icon-dot {40 width: 10px; height: 10px; background: #2b2b2b; border-radius: 50%;41 }42 .icon-signal, .icon-wifi, .icon-battery {43 width: 34px; height: 18px; border: 2px solid #2b2b2b; border-radius: 3px; position: relative;44 }45 .icon-battery::after {46 content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: #2b2b2b; border-radius: 1px;47 }48 .icon-signal::before { content: ""; position: absolute; left: 2px; bottom: 2px; width: 24px; height: 12px; background: #2b2b2b; }49 .icon-wifi::before { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 10px; border-radius: 6px; border: 2px solid #2b2b2b; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; }50 /* Top search row */51 .top-row {52 padding: 8px 24px 10px 24px;53 display: flex;54 align-items: center;55 gap: 16px;56 }57 .back-btn {58 width: 56px; height: 56px; background: transparent; border: none; padding: 0; cursor: default;59 }60 .search-bar {61 flex: 1;62 background: #ffffff;63 border-radius: 30px;64 box-shadow: 0 2px 6px rgba(0,0,0,0.18);65 height: 76px;66 display: flex;67 align-items: center;68 padding: 0 22px;69 gap: 16px;70 box-sizing: border-box;71 border: 1px solid #e5e5e5;72 }73 .search-text {74 color: #444;75 font-size: 34px;76 flex: 1;77 }78 .scan-icon {79 width: 52px; height: 52px;80 border-radius: 14px;81 background: #f6f6f6;82 display: flex; align-items: center; justify-content: center;83 border: 1px solid #e0e0e0;84 }85 /* Tabs */86 .tabs {87 width: 100%;88 background: #ffffff;89 display: grid;90 grid-template-columns: 1fr 1fr 1fr 96px;91 align-items: center;92 border-top: 1px solid #e6e6e6;93 border-bottom: 1px solid #eeeeee;94 }95 .tab {96 text-align: center;97 padding: 26px 0;98 font-size: 34px;99 color: #444;100 }101 .tab.active {102 color: #ef6c00;103 font-weight: 700;104 position: relative;105 }106 .tab.active::after {107 content: "";108 position: absolute;109 bottom: 0; left: 25%; right: 25%;110 height: 6px; background: #ef6c00; border-radius: 4px 4px 0 0;111 }112 .tab.up {113 background: #e6f6f2;114 display: flex; align-items: center; justify-content: center;115 }116 /* Content area */117 .content {118 padding: 24px;119 }120 .section-title {121 font-size: 46px;122 font-weight: 700;123 margin: 18px 0 6px 0;124 }125 .subtle {126 color: #757575;127 font-size: 32px;128 }129 .actions-row {130 display: flex;131 align-items: center;132 justify-content: space-between;133 margin: 22px 4px 20px 4px;134 }135 .actions-left {136 display: flex; align-items: center; gap: 22px;137 }138 .pill-btn {139 padding: 20px 30px;140 border-radius: 18px;141 background: #ffffff;142 border: 2px solid #e6e6e6;143 box-shadow: 0 4px 12px rgba(0,0,0,0.08);144 font-size: 36px;145 }146 .link-grey {147 color: #616161;148 font-size: 36px;149 }150 /* Reviewer block */151 .review {152 margin-top: 24px;153 }154 .review-head {155 display: flex; align-items: center; gap: 18px;156 }157 .avatar {158 width: 72px; height: 72px; border-radius: 50%;159 background: #E0E0E0;160 border: 1px solid #BDBDBD;161 display: flex; align-items: center; justify-content: center;162 color: #757575;163 font-size: 18px;164 }165 .reviewer-name { font-size: 36px; font-weight: 600; }166 .stars-row {167 display: flex; align-items: center; gap: 14px;168 margin: 16px 0 8px 0;169 }170 .verified {171 color: #ef6c00; font-weight: 700; font-size: 30px;172 }173 .review-title { font-weight: 800; font-size: 42px; margin: 8px 0 8px 0; }174 .review-meta { color: #777; font-size: 30px; line-height: 38px; }175 .review-body { font-size: 36px; line-height: 48px; margin-top: 14px; }176 .divider {177 height: 2px; background: #eaeaea; margin: 30px 0;178 }179 .list-item {180 display: flex; align-items: center; justify-content: space-between;181 padding: 36px 24px;182 font-size: 40px;183 }184 .card-btn {185 margin: 16px 8px;186 background: #ffffff;187 border: 2px solid #eaeaea;188 border-radius: 22px;189 padding: 34px 28px;190 font-size: 40px;191 box-shadow: 0 8px 18px rgba(0,0,0,0.06);192 display: flex;193 align-items: center;194 justify-content: space-between;195 }196 /* Product strip and add to cart */197 .product-strip {198 margin-top: 14px;199 width: 100%;200 height: 220px;201 background: #ffffff;202 border-top: 2px solid #eeeeee;203 border-bottom: 2px solid #eeeeee;204 display: flex;205 align-items: center;206 padding: 0 24px;207 box-sizing: border-box;208 gap: 24px;209 }210 .product-img {211 flex: 1;212 height: 160px;213 background: #E0E0E0;214 border: 1px solid #BDBDBD;215 display: flex; align-items: center; justify-content: center;216 color: #757575; border-radius: 8px;217 }218 .add-to-cart {219 width: 280px; height: 96px; background: #ffd400; border-radius: 48px;220 display: flex; align-items: center; justify-content: center;221 font-size: 36px; font-weight: 700; color: #212121; border: 1px solid #f0c000;222 box-shadow: 0 6px 10px rgba(0,0,0,0.12) inset;223 }224 /* Bottom nav */225 .bottom-nav {226 position: absolute;227 left: 0; right: 0; bottom: 60px;228 height: 140px; background: #ffffff; border-top: 2px solid #e9e9e9;229 display: grid; grid-template-columns: repeat(5, 1fr);230 align-items: center; text-align: center;231 }232 .nav-item { font-size: 28px; color: #555; }233 .nav-item.active { color: #11a1a0; font-weight: 700; }234 .gesture {235 position: absolute; left: 50%; transform: translateX(-50%);236 bottom: 20px; width: 300px; height: 10px; background: #c8c8c8; border-radius: 6px;237 }238 /* Simple SVG icon sizing helpers */239 .svg-24 { width: 48px; height: 48px; }240 .svg-20 { width: 40px; height: 40px; }241 .svg-star { width: 36px; height: 36px; }242</style>243</head>244<body>245<div id="render-target">246 <div class="header">247 <div class="status-bar">248 <div>2:13</div>249 <div class="status-icons">250 <div class="icon-dot"></div>251 <div class="icon-signal"></div>252 <div class="icon-wifi"></div>253 <div class="icon-battery"></div>254 </div>255 </div>256 <div class="top-row">257 <button class="back-btn" aria-label="Back">258 <svg class="svg-24" viewBox="0 0 24 24">259 <path d="M15 4 L7 12 L15 20" stroke="#1b1b1b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </button>262 <div class="search-bar">263 <svg class="svg-24" viewBox="0 0 24 24">264 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>265 <line x1="15" y1="15" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>266 </svg>267 <div class="search-text">women's running shoes</div>268 <div class="scan-icon" aria-label="Scan">269 <svg class="svg-20" viewBox="0 0 24 24">270 <rect x="5" y="5" width="14" height="14" rx="3" ry="3" fill="none" stroke="#707070" stroke-width="2"/>271 <path d="M9 5 v3 M15 5 v3 M9 19 v-3 M15 19 v-3" stroke="#707070" stroke-width="2" stroke-linecap="round"/>272 </svg>273 </div>274 </div>275 </div>276 <div class="tabs">277 <div class="tab">Details</div>278 <div class="tab">Compare</div>279 <div class="tab active">Reviews</div>280 <div class="tab up">281 <svg class="svg-24" viewBox="0 0 24 24">282 <path d="M6 14 L12 8 L18 14" stroke="#1b1b1b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 </div>286 </div>287 288 <div class="content">289 <div class="section-title">Comfortable</div>290 <div class="subtle">One person found this helpful</div>291 292 <div class="actions-row">293 <div class="actions-left">294 <div class="pill-btn">Helpful</div>295 <div class="pill-btn" style="padding:16px 24px; display:flex; align-items:center; gap:12px;">296 <svg class="svg-20" viewBox="0 0 24 24">297 <circle cx="6" cy="12" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>298 <circle cx="18" cy="6" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>299 <circle cx="18" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>300 <line x1="8.5" y1="10.5" x2="15.5" y2="7.5" stroke="#5f6368" stroke-width="2"/>301 <line x1="8.5" y1="13.5" x2="15.5" y2="16.5" stroke="#5f6368" stroke-width="2"/>302 </svg>303 <span>Share</span>304 </div>305 </div>306 <div class="link-grey">Report</div>307 </div>308 309 <div class="review">310 <div class="review-head">311 <div class="avatar">[IMG: Avatar]</div>312 <div class="reviewer-name">Roopa</div>313 </div>314 <div class="stars-row">315 <!-- 4 filled, 1 empty -->316 <svg class="svg-star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ff9800"/></svg>317 <svg class="svg-star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ff9800"/></svg>318 <svg class="svg-star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ff9800"/></svg>319 <svg class="svg-star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ff9800"/></svg>320 <svg class="svg-star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#c9c9c9"/></svg>321 <div class="verified">Verified Purchase</div>322 </div>323 <div class="review-title">Nice product</div>324 <div class="review-meta">Reviewed in India on 19 October 2023</div>325 <div class="review-meta">Size: 6 UK | Colour: VOILET/RANI</div>326 <div class="review-body">Nice product, can buy this for comfortable walking. Worth for the money.</div>327 328 <div class="actions-row" style="margin-top: 18px;">329 <div class="actions-left">330 <div class="pill-btn">Helpful</div>331 <div class="pill-btn" style="padding:16px 24px; display:flex; align-items:center; gap:12px;">332 <svg class="svg-20" viewBox="0 0 24 24">333 <circle cx="6" cy="12" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>334 <circle cx="18" cy="6" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>335 <circle cx="18" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/>336 <line x1="8.5" y1="10.5" x2="15.5" y2="7.5" stroke="#5f6368" stroke-width="2"/>337 <line x1="8.5" y1="13.5" x2="15.5" y2="16.5" stroke="#5f6368" stroke-width="2"/>338 </svg>339 <span>Share</span>340 </div>341 </div>342 <div class="link-grey">Report</div>343 </div>344 </div>345 346 <div class="divider"></div>347 348 <div class="list-item">349 <div style="font-weight:800;">See more reviews</div>350 <svg class="svg-24" viewBox="0 0 24 24">351 <path d="M9 6 L15 12 L9 18" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>352 </svg>353 </div>354 355 <div class="card-btn">356 <div>Create a video review</div>357 <svg class="svg-24" viewBox="0 0 24 24">358 <path d="M9 6 L15 12 L9 18" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>359 </svg>360 </div>361 362 <div class="card-btn">363 <div>Write a review</div>364 <svg class="svg-24" viewBox="0 0 24 24">365 <path d="M9 6 L15 12 L9 18" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>366 </svg>367 </div>368 369 <div class="product-strip">370 <div class="product-img">[IMG: Women's Running Shoe]</div>371 <div class="add-to-cart">Add to Cart</div>372 </div>373 </div>374 375 <div class="bottom-nav">376 <div class="nav-item active">377 <div>378 <svg class="svg-24" viewBox="0 0 24 24">379 <path d="M3 10 L12 3 L21 10 V21 H14 V15 H10 V21 H3 Z" fill="none" stroke="#11a1a0" stroke-width="2"/>380 </svg>381 </div>382 Home383 </div>384 <div class="nav-item">385 <div>386 <svg class="svg-24" viewBox="0 0 24 24">387 <circle cx="12" cy="8" r="4" stroke="#555" stroke-width="2" fill="none"/>388 <path d="M4 21c2-4 14-4 16 0" stroke="#555" stroke-width="2" fill="none"/>389 </svg>390 </div>391 You392 </div>393 <div class="nav-item">394 <div>395 <svg class="svg-24" viewBox="0 0 24 24">396 <rect x="4" y="4" width="16" height="6" rx="1" ry="1" stroke="#555" stroke-width="2" fill="none"/>397 <rect x="4" y="12" width="16" height="6" rx="1" ry="1" stroke="#555" stroke-width="2" fill="none"/>398 </svg>399 </div>400 More401 </div>402 <div class="nav-item">403 <div>404 <svg class="svg-24" viewBox="0 0 24 24">405 <path d="M3 5h3l2 12h10l2-8H7" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>406 <circle cx="10" cy="20" r="1.5" fill="#555"/>407 <circle cx="17" cy="20" r="1.5" fill="#555"/>408 </svg>409 </div>410 Cart411 </div>412 <div class="nav-item">413 <div>414 <svg class="svg-24" viewBox="0 0 24 24">415 <line x1="4" y1="7" x2="20" y2="7" stroke="#555" stroke-width="2"/>416 <line x1="4" y1="12" x2="20" y2="12" stroke="#555" stroke-width="2"/>417 <line x1="4" y1="17" x2="20" y2="17" stroke="#555" stroke-width="2"/>418 </svg>419 </div>420 Menu421 </div>422 </div>423 <div class="gesture"></div>424</div>425</body>426</html>