GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Reviews UI - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: linear-gradient(180deg, #bde9e4 0%, #c7eadf 35%, #ffffff 35%, #ffffff 100%);11 color: #111;12 }13 14 /* Status bar */15 .status-bar {16 height: 90px;17 padding: 0 30px;18 display: flex;19 align-items: center;20 font-size: 34px;21 color: #111;22 }23 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 26px; opacity: 0.9; }24 25 /* Header with search */26 .header {27 padding: 10px 30px 24px 30px;28 }29 .header-row {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .back-btn {35 width: 72px; height: 72px; border-radius: 36px;36 display: flex; align-items: center; justify-content: center;37 }38 .search-bar {39 flex: 1;40 background: #fff;41 border-radius: 28px;42 height: 120px;43 box-shadow: 0 6px 18px rgba(0,0,0,0.12);44 display: flex;45 align-items: center;46 padding: 0 30px;47 gap: 22px;48 }49 .search-input {50 flex: 1; color: #666; font-size: 36px;51 }52 .search-actions { display: flex; align-items: center; gap: 30px; }53 54 /* Image row */55 .image-row {56 padding: 20px 30px;57 display: grid;58 grid-template-columns: 1fr 1fr;59 gap: 24px;60 }61 .img-ph {62 height: 260px;63 background: #E0E0E0;64 border: 1px solid #BDBDBD;65 display: flex; align-items: center; justify-content: center;66 color: #757575; font-size: 28px;67 border-radius: 12px;68 }69 70 /* Section titles and tabs */71 .section {72 padding: 18px 30px;73 }74 .section h2 {75 margin: 0;76 font-size: 56px;77 font-weight: 700;78 letter-spacing: -0.5px;79 }80 .tabs {81 display: flex; gap: 42px; margin-top: 20px; margin-bottom: 8px;82 font-size: 40px; font-weight: 600;83 }84 .tab-active { color: #0f7f86; }85 .tab-inactive { color: #444; }86 .underline {87 width: 170px; height: 6px; background: #0f7f86; border-radius: 3px; margin-top: 10px;88 }89 90 /* Chips */91 .chips {92 display: flex; flex-wrap: wrap; gap: 22px;93 padding: 18px 30px;94 }95 .chip {96 border: 1px solid #C9C9C9; border-radius: 42px;97 padding: 18px 30px; font-size: 34px; color: #333;98 height: 80px; display: flex; align-items: center;99 background: #fff;100 }101 102 /* Reviews */103 .reviews {104 padding: 26px 30px 340px 30px; /* leave room for bottom nav */105 }106 .reviews h3 {107 font-size: 54px;108 margin: 0 0 26px 0;109 font-weight: 800;110 }111 .review-card {112 padding: 26px 0 18px 0;113 border-bottom: 1px solid #EEEEEE;114 }115 .review-header {116 display: flex; align-items: center; gap: 22px;117 }118 .avatar {119 width: 88px; height: 88px; border-radius: 44px;120 background: #E0E0E0; border: 1px solid #BDBDBD;121 display: flex; align-items: center; justify-content: center;122 color: #757575; font-size: 24px;123 flex-shrink: 0;124 }125 .name { font-size: 44px; font-weight: 700; }126 .stars { display: inline-flex; gap: 8px; margin-top: 14px; }127 .verified {128 display: inline-block;129 margin-left: 18px;130 background: #f0a64b;131 color: #fff;132 font-weight: 700;133 font-size: 30px;134 padding: 8px 16px;135 border-radius: 12px;136 }137 .title {138 font-size: 44px; font-weight: 800; margin-top: 12px;139 }140 .meta { color: #666; font-size: 34px; margin-top: 8px; }141 .meta .dot { margin: 0 8px; }142 .review-text { font-size: 40px; margin-top: 18px; line-height: 1.35; }143 .review-actions {144 margin-top: 20px;145 display: flex; align-items: center; gap: 30px;146 }147 .btn {148 height: 86px; padding: 0 28px; border: 1px solid #DADADA;149 border-radius: 20px; display: flex; align-items: center; gap: 20px;150 font-size: 36px; color: #111; background: #fff;151 }152 .report {153 margin-left: auto; font-size: 36px; color: #555; text-decoration: none;154 }155 156 /* Bottom navigation */157 .bottom-nav {158 position: absolute; bottom: 0; left: 0; right: 0;159 height: 170px; border-top: 1px solid #E6E6E6; background: #fff;160 display: flex; align-items: center; justify-content: space-around;161 }162 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 34px; color: #222; }163 .nav-icon { width: 64px; height: 64px; }164 165 /* Simple utility */166 .muted { color: #666; }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status Bar -->173 <div class="status-bar">174 <div>10:00</div>175 <div class="status-icons">176 <!-- simple dots to mimic status indicators -->177 <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#222"/></svg>178 <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#222"/></svg>179 <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#222"/></svg>180 <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#222"/></svg>181 <svg width="32" height="24" viewBox="0 0 32 24">182 <path d="M2 8h20v8H2z" stroke="#222" stroke-width="2" fill="none"/>183 <rect x="24" y="10" width="6" height="4" fill="#222"/>184 </svg>185 </div>186 </div>187 188 <!-- Header -->189 <div class="header">190 <div class="header-row">191 <div class="back-btn">192 <svg width="48" height="48" viewBox="0 0 24 24">193 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </div>196 <div class="search-bar">197 <svg width="46" height="46" viewBox="0 0 24 24">198 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>199 <path d="M21 21l-6-6" stroke="#555" stroke-width="2" stroke-linecap="round"/>200 </svg>201 <div class="search-input">Search Amazon.in</div>202 <div class="search-actions">203 <!-- camera icon -->204 <svg width="46" height="46" viewBox="0 0 24 24">205 <path d="M4 7h4l2-2h4l2 2h4v12H4z" stroke="#333" stroke-width="2" fill="none"/>206 <circle cx="12" cy="13" r="4" stroke="#333" stroke-width="2" fill="none"/>207 </svg>208 <!-- mic icon -->209 <svg width="46" height="46" viewBox="0 0 24 24">210 <rect x="9" y="4" width="6" height="10" rx="3" stroke="#333" stroke-width="2" fill="none"/>211 <path d="M5 12c0 4 3 6 7 6s7-2 7-6M12 18v2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>212 </svg>213 </div>214 </div>215 </div>216 </div>217 218 <!-- Product image thumbnails -->219 <div class="image-row">220 <div class="img-ph">[IMG: Black Pants - Fabric Close]</div>221 <div class="img-ph">[IMG: Black Pants - Full Length]</div>222 </div>223 224 <!-- Filter reviews by -->225 <div class="section">226 <h2>Filter reviews by</h2>227 <div class="tabs">228 <div class="tab-active">Height (ft)</div>229 <div class="tab-inactive">Weight (kg)</div>230 </div>231 <div class="underline"></div>232 </div>233 234 <!-- Height chips -->235 <div class="chips">236 <div class="chip">4'10"-5'0"</div>237 <div class="chip">5'1"-5'3"</div>238 <div class="chip">5'4"-5'6"</div>239 <div class="chip">5'7"-5'9"</div>240 <div class="chip">5'10"-6'1"</div>241 </div>242 243 <!-- Top reviews -->244 <div class="reviews">245 <h3>Top reviews from India</h3>246 247 <!-- Review Card 1 -->248 <div class="review-card">249 <div class="review-header">250 <div class="avatar">Avatar</div>251 <div class="name">Aseem</div>252 </div>253 <div class="stars">254 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>255 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>256 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>257 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>258 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>259 <span class="verified">Verified Purchase</span>260 </div>261 <div class="title">Good</div>262 <div class="meta">Reviewed in India on 12 September 2023</div>263 <div class="meta">Size: L <span class="dot">|</span> Color: Black</div>264 <div class="review-text">Very Comfortable and good fit.</div>265 <div class="review-actions">266 <div class="btn">267 <svg width="34" height="34" viewBox="0 0 24 24">268 <path d="M7 11l3 3 7-7" stroke="#2c7a7b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 <span>Helpful</span>271 </div>272 <div class="btn">273 <svg width="34" height="34" viewBox="0 0 24 24">274 <path d="M14 9l-4-4v10l4-4M5 20h14" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 <span>Share</span>277 </div>278 <a class="report" href="#">Report</a>279 </div>280 </div>281 282 <!-- Review Card 2 -->283 <div class="review-card">284 <div class="review-header">285 <div class="avatar">Avatar</div>286 <div class="name">Chandresh Vasani</div>287 </div>288 <div class="stars">289 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>290 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>291 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>292 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>293 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#f2a324"/></svg>294 <span class="verified">Verified Purchase</span>295 </div>296 <div class="title">Fitting Perfect</div>297 <div class="meta">Reviewed in India on 22 June 2023</div>298 <div class="meta">Size: M <span class="dot">|</span> Color: Black</div>299 <div class="review-text">Good quality and good fittings.</div>300 </div>301 </div>302 303 <!-- Bottom Navigation -->304 <div class="bottom-nav">305 <div class="nav-item">306 <svg class="nav-icon" viewBox="0 0 24 24">307 <path d="M3 10l9-7 9 7v9H3z" stroke="#111" stroke-width="2" fill="none"/>308 </svg>309 <div>Home</div>310 </div>311 <div class="nav-item">312 <svg class="nav-icon" viewBox="0 0 24 24">313 <circle cx="12" cy="8" r="4" stroke="#111" stroke-width="2" fill="none"/>314 <path d="M4 21c2-5 14-5 16 0" stroke="#111" stroke-width="2" fill="none"/>315 </svg>316 <div>You</div>317 </div>318 <div class="nav-item">319 <svg class="nav-icon" viewBox="0 0 24 24">320 <rect x="4" y="4" width="16" height="16" stroke="#111" stroke-width="2" fill="none"/>321 <path d="M8 8h8v8H8z" fill="#111"/>322 </svg>323 <div>More</div>324 </div>325 <div class="nav-item">326 <svg class="nav-icon" viewBox="0 0 24 24">327 <path d="M6 6h14l-2 9H8L6 6zM8 20a2 2 0 104 0M14 20a2 2 0 104 0" stroke="#111" stroke-width="2" fill="none"/>328 </svg>329 <div>Cart</div>330 </div>331 <div class="nav-item">332 <svg class="nav-icon" viewBox="0 0 24 24">333 <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>334 </svg>335 <div>Menu</div>336 </div>337 </div>338 339</div>340</body>341</html>