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>Mock Mobile UI - Compare Items</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Scrollable app viewport */20 .viewport {21 position: absolute;22 inset: 0;23 overflow-y: auto;24 -webkit-overflow-scrolling: touch;25 }26 27 /* Top gradient background block */28 .top-gradient {29 position: absolute;30 top: 0; left: 0; right: 0;31 height: 360px;32 background: linear-gradient(90deg, #9fe6d8, #d7f3ee);33 z-index: 0;34 }35 36 /* Status bar */37 .statusbar {38 position: relative;39 z-index: 2;40 height: 60px;41 display: flex;42 align-items: center;43 padding: 0 28px;44 color: #0b3d3a;45 font-size: 28px;46 letter-spacing: 0.5px;47 }48 .statusbar .right {49 margin-left: auto;50 display: flex; align-items: center; gap: 18px;51 }52 .dot { width: 10px; height: 10px; background: #0b3d3a; border-radius: 50%; display: inline-block; }53 54 /* Search header row */55 .header {56 position: relative;57 z-index: 2;58 display: flex;59 align-items: center;60 padding: 18px 24px;61 gap: 16px;62 }63 .icon-btn {64 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;65 }66 .searchbar {67 flex: 1;68 background: #fff;69 border-radius: 36px;70 height: 88px;71 display: flex; align-items: center;72 padding: 0 26px;73 box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.06);74 border: 1px solid #e6e6e6;75 }76 .searchbar .hint {77 color: #555; font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;78 }79 .searchbar .right-icon { margin-left: auto; opacity: 0.7; }80 81 /* Tabs */82 .tabs-wrap {83 position: relative; z-index: 2;84 background: #f9f9f9;85 border-top-left-radius: 16px; border-top-right-radius: 16px;86 }87 .tabs {88 display: flex; align-items: center;89 background: #fff;90 padding: 18px 18px;91 border-top: 1px solid rgba(0,0,0,0.06);92 border-bottom: 1px solid rgba(0,0,0,0.06);93 }94 .tab {95 padding: 26px 30px;96 font-size: 32px;97 color: #6b6b6b;98 }99 .tab.active {100 color: #f08804;101 font-weight: 700;102 position: relative;103 }104 .tab.active::after {105 content: "";106 position: absolute; left: 22px; right: 22px; bottom: -6px;107 height: 8px; background: #f08804; border-radius: 8px;108 }109 .tab.chev { margin-left: auto; padding-right: 16px; }110 111 /* Section search inside Q&A */112 .inline-search {113 margin: 22px 26px 18px;114 background: #fff;115 height: 88px; border-radius: 16px;116 border: 1px solid #dcdcdc;117 display: flex; align-items: center; padding: 0 22px; gap: 16px;118 }119 .inline-search span { color: #808080; font-size: 30px; }120 121 /* Section title */122 .section-title {123 font-size: 48px; font-weight: 800;124 margin: 36px 30px 18px;125 }126 127 /* Horizontal products area */128 .products {129 display: flex; gap: 30px;130 padding: 10px 30px 24px;131 overflow: hidden;132 }133 .product {134 width: 310px;135 }136 .img-ph {137 width: 310px; height: 200px;138 background: #E0E0E0;139 border: 1px solid #BDBDBD;140 display: flex; align-items: center; justify-content: center;141 color: #757575; font-size: 26px; text-align: center;142 border-radius: 6px;143 margin-bottom: 12px;144 }145 .p-title { font-size: 28px; color: #146eb4; line-height: 1.2; }146 .p-title.primary { color: #111; }147 .p-title .bold { font-weight: 700; }148 149 /* Comparison table */150 .compare {151 margin: 10px 20px;152 border: 1px solid #d0d0d0;153 border-radius: 8px;154 overflow: hidden;155 }156 .row { display: grid; grid-template-columns: 240px 1fr 1fr 1fr; border-bottom: 1px solid #d0d0d0; }157 .cell {158 padding: 22px 18px;159 font-size: 28px;160 background: #fff;161 }162 .cell.header { background: #f6f6f6; font-weight: 700; }163 .cell.center { text-align: center; }164 .rating-stars { color: #ff9900; font-size: 30px; letter-spacing: 2px; }165 .price { color: #b12704; font-weight: 700; }166 .free { color: #0a9b80; }167 .seller { color: #333; }168 .muted { color: #a0a0a0; }169 170 /* See more details */171 .see-more {172 margin: 10px 20px 28px;173 background: #fff;174 border: 1px solid #e1e1e1;175 border-radius: 12px;176 height: 96px;177 display: flex; align-items: center; justify-content: center;178 font-size: 32px; color: #444;179 gap: 10px;180 }181 182 /* Promo section */183 .promo {184 padding: 24px 26px 180px;185 border-top: 1px solid #e9e9e9;186 background: #fff;187 }188 .promo h3 { margin: 8px 0 6px; font-size: 44px; }189 .sponsored { color: #8e8e8e; font-size: 24px; display: flex; align-items: center; gap: 8px; }190 191 /* Bottom nav bar */192 .bottom-nav {193 position: absolute; left: 0; right: 0; bottom: 48px;194 height: 132px;195 background: #ffffff;196 border-top: 1px solid #e5e5e5;197 display: grid; grid-template-columns: repeat(5, 1fr);198 align-items: center; text-align: center;199 z-index: 5;200 }201 .bn-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 24px; color: #333; }202 .bn-item.active { color: #0bb8a7; }203 .badge {204 position: absolute; top: -6px; right: 110px;205 background: #ff4d4f; color: #fff; border-radius: 16px; font-size: 20px;206 padding: 2px 10px; line-height: 1;207 }208 209 /* Home indicator */210 .home-indicator {211 position: absolute; left: 50%; transform: translateX(-50%);212 bottom: 14px;213 width: 360px; height: 12px; background: #bfbfbf; border-radius: 8px; opacity: 0.8;214 }215 216 /* Simple utility */217 .flex { display: flex; align-items: center; gap: 10px; }218</style>219</head>220<body>221<div id="render-target">222 <div class="viewport">223 <div class="top-gradient"></div>224 225 <!-- Status Bar -->226 <div class="statusbar">227 <div>9:01</div>228 <div class="right">229 <span style="font-weight:700; opacity:.8;">ib</span>230 <!-- simple magnify as circle -->231 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0b3d3a" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="22" y2="22"/></svg>232 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0b3d3a" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="22" y2="22"/></svg>233 <span class="dot"></span>234 <span class="dot" style="opacity:.6;"></span>235 <svg width="28" height="28" viewBox="0 0 24 24" fill="#0b3d3a"><path d="M21 8l-9 9-5-5 2-2 3 3 7-7z"/></svg>236 <svg width="28" height="28" viewBox="0 0 24 24" fill="#0b3d3a"><path d="M7 21h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2z"/></svg>237 </div>238 </div>239 240 <!-- Header with back + search -->241 <div class="header">242 <div class="icon-btn">243 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">244 <polyline points="15 18 9 12 15 6"></polyline>245 </svg>246 </div>247 <div class="searchbar">248 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="22" y2="22"/></svg>249 <div class="hint">portable tool box for toolbox for h...</div>250 <div class="right-icon">251 <svg width="40" height="40" viewBox="0 0 24 24" fill="#888"><path d="M3 6h4l2-2h6l2 2h4v14H3z"/></svg>252 </div>253 </div>254 </div>255 256 <!-- Tabs -->257 <div class="tabs-wrap">258 <div class="tabs">259 <div class="tab">Details</div>260 <div class="tab active">Questions</div>261 <div class="tab">Compare</div>262 <div class="tab">Reviews</div>263 <div class="tab chev">264 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><polyline points="6 14 12 8 18 14"/></svg>265 </div>266 </div>267 </div>268 269 <!-- Inline Search -->270 <div class="inline-search">271 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#7c7c7c" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="22" y2="22"/></svg>272 <span>Search in reviews, Q&A...</span>273 </div>274 275 <!-- Compare section -->276 <div class="section-title">Compare with similar items</div>277 278 <div class="products">279 <div class="product">280 <div class="img-ph">[IMG: Orange & Silver Tool Box]</div>281 <div class="p-title primary"><span class="bold">This item</span> Plantex High Grade Metal Tool...</div>282 </div>283 <div class="product">284 <div class="img-ph">[IMG: Black & Orange Tool Box]</div>285 <div class="p-title">Buildskill 21" Powder-Coated M...</div>286 </div>287 <div class="product">288 <div class="img-ph">[IMG: Red Metal Tool Box]</div>289 <div class="p-title">ACHRO High Metal Tool...</div>290 </div>291 </div>292 293 <!-- Comparison grid -->294 <div class="compare">295 <div class="row">296 <div class="cell header">RATING</div>297 <div class="cell center">298 <div class="rating-stars">★★★★★</div>299 <div class="muted" style="margin-top:6px;">1171 reviews</div>300 </div>301 <div class="cell center">302 <div class="rating-stars">★★★★★</div>303 <div class="muted" style="margin-top:6px;">257 reviews</div>304 </div>305 <div class="cell center">306 <div class="rating-stars">★★★★★</div>307 <div class="muted" style="margin-top:6px;">71 reviews</div>308 </div>309 </div>310 311 <div class="row">312 <div class="cell header">PRICE</div>313 <div class="cell center"><span class="price">₹2,184.00</span></div>314 <div class="cell center"><span class="price">₹2,249.00</span></div>315 <div class="cell center"><span class="price">₹1,599.00</span></div>316 </div>317 318 <div class="row">319 <div class="cell header">SHIPPING</div>320 <div class="cell center">321 <span style="background:#222; color:#fff; padding:4px 8px; border-radius:4px; font-size:22px;">a Fulfilled</span>322 <span class="free" style="margin-left:8px;">FREE Delivery</span>323 </div>324 <div class="cell center">325 <span style="background:#222; color:#fff; padding:4px 8px; border-radius:4px; font-size:22px;">a Fulfilled</span>326 <span class="free" style="margin-left:8px;">FREE Delivery</span>327 </div>328 <div class="cell center">329 <span style="background:#222; color:#fff; padding:4px 8px; border-radius:4px; font-size:22px;">a Fulfilled</span>330 <span class="free" style="margin-left:8px;">FREE Delivery</span>331 </div>332 </div>333 334 <div class="row">335 <div class="cell header">SOLD BY</div>336 <div class="cell center"><span class="seller">Plantex-Globalbees</span></div>337 <div class="cell center"><span class="seller">Clicktech Retail</span></div>338 <div class="cell center"><span class="seller">Clicktech Retail</span></div>339 </div>340 341 <div class="row">342 <div class="cell header">DURABILITY</div>343 <div class="cell center">4.1 <span class="rating-stars">★★★★★</span></div>344 <div class="cell center"><span class="muted">—</span></div>345 <div class="cell center">4.1 <span class="rating-stars">★★★★★</span></div>346 </div>347 348 <div class="row">349 <div class="cell header">STURDINESS</div>350 <div class="cell center">4.2 <span class="rating-stars">★★★★★</span></div>351 <div class="cell center"><span class="muted">—</span></div>352 <div class="cell center">4.2 <span class="rating-stars">★★★★★</span></div>353 </div>354 </div>355 356 <div class="see-more">357 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2"><polyline points="6 14 12 8 18 14"/></svg>358 <span>See more details</span>359 </div>360 361 <!-- Sponsored section -->362 <div class="promo">363 <div class="sponsored">364 Sponsored365 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8e8e8e" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="1"/></svg>366 </div>367 <h3>Free delivery for eligible orders</h3>368 <div style="height: 120px; margin-top: 8px; background: #E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Delivery Banner]</div>369 </div>370 371 <!-- Bottom navigation -->372 <div class="bottom-nav">373 <div class="bn-item active">374 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#0bb8a7" stroke-width="2"><path d="M3 12l9-9 9 9"/><path d="M9 21V9h6v12"/></svg>375 <div>Home</div>376 </div>377 <div class="bn-item">378 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 14.5-4 16 0"/></svg>379 <div>You</div>380 </div>381 <div class="bn-item">382 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>383 <div>More</div>384 </div>385 <div class="bn-item" style="position:relative;">386 <span class="badge">1</span>387 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M6 6h15l-2 10H7L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>388 <div>Cart</div>389 </div>390 <div class="bn-item">391 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>392 <div>Menu</div>393 </div>394 </div>395 396 <div class="home-indicator"></div>397 </div>398</div>399</body>400</html>