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 Compare UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #212121;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 20px 30px 0 30px;20 font-size: 40px; color: #333;21 display: flex; align-items: center; justify-content: space-between;22 }23 .status-icons { display: flex; gap: 24px; align-items: center; }24 .status-dot { width: 24px; height: 24px; background:#777; border-radius: 50%; }25 26 /* Top search row */27 .top-row {28 display: flex; align-items: center;29 padding: 10px 30px 0 30px;30 gap: 24px;31 }32 .icon-btn {33 width: 72px; height: 72px; border-radius: 36px;34 display: flex; align-items: center; justify-content: center;35 }36 .search-box {37 flex: 1; background: #f0f1f3; border: 1px solid #d9d9db; border-radius: 20px;38 height: 92px; display: flex; align-items: center; padding: 0 28px; gap: 24px;39 }40 .search-placeholder { color: #8b8d92; font-size: 36px; }41 .cart-wrap { position: relative; }42 .badge {43 position: absolute; right: -6px; top: -6px;44 background: #ff3b30; color: #fff; border-radius: 24px;45 font-size: 30px; padding: 6px 14px; border: 2px solid #fff;46 }47 48 /* Certified buyer */49 .certified {50 display: flex; align-items: center; gap: 16px;51 padding: 28px 36px; font-size: 34px; color: #5f6368;52 }53 54 /* All Questions row */55 .list-row {56 display: flex; align-items: center; justify-content: space-between;57 padding: 36px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;58 }59 .list-row .title { font-size: 44px; font-weight: 600; color: #111; }60 61 /* Section title */62 .section-title {63 padding: 36px; font-size: 50px; font-weight: 700; color: #2d2d2d;64 border-top: 10px solid #f3f3f3;65 border-bottom: 1px solid #eaeaea;66 }67 68 /* Product cards */69 .product-strip {70 display: flex; gap: 28px; padding: 30px 36px;71 border-bottom: 1px solid #eaeaea;72 }73 .card {74 width: 320px;75 }76 .img-ph {77 width: 320px; height: 320px;78 background: #E0E0E0; border: 1px solid #BDBDBD;79 display: flex; align-items: center; justify-content: center;80 color: #757575; font-size: 28px; text-align: center;81 border-radius: 16px;82 }83 .card .label { font-size: 36px; font-weight: 700; margin-top: 24px; }84 .card .sub { font-size: 30px; color: #666; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }85 .rating { display: flex; align-items: center; gap: 6px; margin-top: 14px; }86 .price { font-size: 46px; font-weight: 800; margin-top: 16px; }87 .old-price { font-size: 30px; color: #9e9e9e; text-decoration: line-through; margin-top: 6px; }88 89 /* Comparison table */90 .compare-table { margin-top: 16px; }91 .row { display: grid; grid-template-columns: 300px 1fr 1fr 1fr; }92 .cell {93 padding: 34px 28px; font-size: 34px; border-top: 1px solid #ececec;94 }95 .row:nth-child(odd) .cell { background: #fafafa; }96 .feat { color: #7a7a7a; font-weight: 600; }97 .val { color: #2e2e2e; }98 99 /* Action strip */100 .action-strip {101 display: grid; grid-template-columns: 1fr 1fr;102 border-top: 1px solid #e7e7e7;103 margin-top: 18px;104 }105 .action-btn {106 display: flex; align-items: center; gap: 18px; justify-content: center;107 padding: 34px; font-size: 40px; color: #3a3a3a;108 border-right: 1px solid #e7e7e7;109 background: #fbfbfb;110 }111 .action-btn:last-child { border-right: none; }112 113 /* Seller info */114 .seller {115 display: flex; align-items: center; justify-content: space-between;116 padding: 28px 36px; border-top: 12px solid #f4f4f4;117 }118 .seller-left { display: flex; align-items: center; gap: 24px; }119 .seller-name { font-size: 42px; font-weight: 700; }120 121 /* Bottom purchase buttons */122 .purchase-row {123 display: grid; grid-template-columns: 180px 1fr 1fr; gap: 24px;124 padding: 24px 36px;125 }126 .mini-btn {127 height: 120px; border: 1px solid #d7d7d7; border-radius: 20px;128 display: flex; align-items: center; justify-content: center; background: #fff;129 }130 .emi-btn {131 height: 120px; border: 1px solid #d7d7d7; border-radius: 20px; background: #f7f7f7;132 display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #333;133 }134 .buy-btn {135 height: 120px; border-radius: 20px; background: #ffcc00;136 display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: #222;137 }138 139 /* Floating help */140 .fab {141 position: absolute; right: 40px; bottom: 360px;142 width: 130px; height: 130px; border-radius: 50%;143 background: #3763ff; box-shadow: 0 10px 24px rgba(0,0,0,0.2);144 display: flex; align-items: center; justify-content: center;145 }146 .fab-inner {147 width: 100px; height: 100px; border-radius: 50%;148 background: #ffd300; display: flex; align-items: center; justify-content: center;149 box-shadow: inset 0 0 0 6px rgba(255,255,255,0.6);150 }151 152 /* Gesture bar */153 .gesture {154 position: absolute; bottom: 18px; left: 50%;155 transform: translateX(-50%);156 width: 300px; height: 12px; background: #d8d8d8; border-radius: 12px;157 }158 159 /* SVG helpers */160 svg { display: block; }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div>10:36</div>169 <div class="status-icons">170 <div class="status-dot"></div>171 <div class="status-dot"></div>172 </div>173 </div>174 175 <!-- Top search row -->176 <div class="top-row">177 <div class="icon-btn">178 <svg width="48" height="48" viewBox="0 0 24 24">179 <path d="M15 6l-6 6 6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>180 </svg>181 </div>182 <div class="search-box">183 <svg width="40" height="40" viewBox="0 0 24 24">184 <circle cx="11" cy="11" r="7" fill="none" stroke="#888" stroke-width="2"/>185 <path d="M21 21l-4.5-4.5" stroke="#888" stroke-width="2" stroke-linecap="round"/>186 </svg>187 <div class="search-placeholder">Search for products</div>188 <div style="margin-left:auto; display:flex; align-items:center;">189 <svg width="40" height="40" viewBox="0 0 24 24">190 <path d="M12 4c2 0 2 3 2 3v6c0 1-1 2-2 2s-2-1-2-2V7s0-3 2-3z" fill="none" stroke="#7c7f85" stroke-width="2"/>191 <path d="M10 18h4" stroke="#7c7f85" stroke-width="2" stroke-linecap="round"/>192 </svg>193 </div>194 </div>195 <div class="icon-btn cart-wrap">196 <svg width="56" height="56" viewBox="0 0 24 24">197 <path d="M3 5h2l2 12h10l2-9H6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>198 <circle cx="9" cy="20" r="1.6" fill="#222"/>199 <circle cx="17" cy="20" r="1.6" fill="#222"/>200 </svg>201 <div class="badge">1</div>202 </div>203 </div>204 205 <!-- Certified Buyer -->206 <div class="certified">207 <svg width="34" height="34" viewBox="0 0 24 24">208 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"/>209 <path d="M7 12l3 3 7-7" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 <div>Certified Buyer</div>212 </div>213 214 <!-- All Questions -->215 <div class="list-row">216 <div class="title">All Questions</div>217 <div class="icon-btn" style="width:64px; height:64px;">218 <svg width="36" height="36" viewBox="0 0 24 24">219 <path d="M9 6l6 6-6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 </div>223 224 <!-- Section title -->225 <div class="section-title">Similar Products to Compare</div>226 227 <!-- Product cards strip -->228 <div class="product-strip">229 <div class="card">230 <div class="img-ph">[IMG: iPhone front]</div>231 <div class="label">This item</div>232 <div class="sub">APPLE iPhone 15 (Blue, 256 GB)</div>233 <div class="rating">234 <!-- 4 green stars + 1 grey -->235 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>236 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>237 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>238 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>239 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#c9c9c9"/></svg>240 </div>241 <div class="price">₹82,999</div>242 </div>243 <div class="card">244 <div class="img-ph">[IMG: Google Pixel 8 Pro]</div>245 <div class="label">Google Pixel 8 Pro</div>246 <div class="sub">128 GB (Bay)</div>247 <div class="rating">248 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>249 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>250 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>251 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>252 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#c9c9c9"/></svg>253 </div>254 <div class="price">₹1,06,999</div>255 <div class="old-price">₹1,06,999</div>256 </div>257 <div class="card">258 <div class="img-ph">[IMG: Google Pixel 8]</div>259 <div class="label">Google Pixel 8</div>260 <div class="sub">256 GB (Hazel)</div>261 <div class="rating">262 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>263 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>264 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>265 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#16a34a"/></svg>266 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.2 1 6.1L12 17l-5.5 3.2 1-6.1L3 9.9l6-.9z" fill="#c9c9c9"/></svg>267 </div>268 <div class="price">₹82,999</div>269 <div class="old-price">₹82,999</div>270 </div>271 </div>272 273 <!-- Comparison table -->274 <div class="compare-table">275 <div class="row">276 <div class="cell feat">Internal Storage</div>277 <div class="cell val">256 GB</div>278 <div class="cell val">128 GB</div>279 <div class="cell val">256 GB</div>280 </div>281 <div class="row">282 <div class="cell feat">Screen</div>283 <div class="cell val">6.1 inch Super Retina XDR</div>284 <div class="cell val">6.7 inch Full HD+ AMOLED</div>285 <div class="cell val">6.2 inch Full HD+</div>286 </div>287 <div class="row">288 <div class="cell feat">Rear Camera</div>289 <div class="cell val">48MP + 12MP</div>290 <div class="cell val">50MP + 48MP + 48MP</div>291 <div class="cell val">50MP + 12MP</div>292 </div>293 <div class="row">294 <div class="cell feat">Battery Capacity</div>295 <div class="cell val">N/A</div>296 <div class="cell val">5050 mAh</div>297 <div class="cell val">4575 mAh</div>298 </div>299 <div class="row">300 <div class="cell feat">RAM</div>301 <div class="cell val">N/A</div>302 <div class="cell val">12 GB</div>303 <div class="cell val">8 GB</div>304 </div>305 </div>306 307 <!-- Action strip -->308 <div class="action-strip">309 <div class="action-btn">310 <svg width="36" height="36" viewBox="0 0 24 24">311 <path d="M4 5h6l2 4h8l-1 7H9L7 8H4z" fill="none" stroke="#606060" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>312 </svg>313 <span>View Similar</span>314 </div>315 <div class="action-btn">316 <svg width="36" height="36" viewBox="0 0 24 24">317 <rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="#606060" stroke-width="2"/>318 <path d="M8 10h8M8 14h8" stroke="#606060" stroke-width="2" stroke-linecap="round"/>319 </svg>320 <span>Add to Compare</span>321 </div>322 </div>323 324 <!-- Seller info -->325 <div class="seller">326 <div class="seller-left">327 <div class="icon-btn" style="width:76px; height:76px; background:#f6f6f6; border:1px solid #e1e1e1;">328 <svg width="42" height="42" viewBox="0 0 24 24">329 <path d="M3 10l2-4h14l2 4v8H3v-8z" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>330 <path d="M7 18v-4h10v4" stroke="#222" stroke-width="2"/>331 </svg>332 </div>333 <div class="seller-name">TREASURE HAUL ONLINE</div>334 </div>335 <svg width="36" height="36" viewBox="0 0 24 24">336 <path d="M9 6l6 6-6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>337 </svg>338 </div>339 340 <!-- Bottom purchase buttons -->341 <div class="purchase-row">342 <div class="mini-btn">343 <svg width="48" height="48" viewBox="0 0 24 24">344 <path d="M3 5h2l2 12h10l2-9H6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>345 <path d="M19 6v-2M19 4h2M21 4v2" stroke="#ff9800" stroke-width="2" stroke-linecap="round"/>346 </svg>347 </div>348 <div class="emi-btn">Pay with EMI</div>349 <div class="buy-btn">Buy now</div>350 </div>351 352 <!-- Floating help -->353 <div class="fab">354 <div class="fab-inner">355 <svg width="60" height="60" viewBox="0 0 24 24">356 <path d="M5 7h6l3 6h5l-2 4H9l-2-4H5z" fill="#2348ff"/>357 </svg>358 </div>359 </div>360 361 <!-- Gesture bar -->362 <div class="gesture"></div>363 364</div>365</body>366</html>