GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Compare Products</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #212121;14 }15 16 /* Top bar */17 .top-bar {18 width: 100%;19 padding: 24px 24px 10px 24px;20 box-sizing: border-box;21 background: #ffffff;22 }23 .top-row {24 display: flex;25 align-items: center;26 gap: 24px;27 }28 .icon-btn {29 width: 72px;30 height: 72px;31 border-radius: 36px;32 display: flex;33 align-items: center;34 justify-content: center;35 }36 .search-wrap {37 flex: 1;38 height: 100px;39 border-radius: 18px;40 background: #f1f3f6;41 display: flex;42 align-items: center;43 padding: 0 24px;44 box-sizing: border-box;45 }46 .search-text {47 flex: 1;48 font-size: 34px;49 color: #616161;50 }51 .cart-btn {52 width: 72px;53 height: 72px;54 border-radius: 18px;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 60 /* Section title */61 .section-title {62 font-size: 46px;63 font-weight: 700;64 padding: 24px;65 padding-top: 16px;66 }67 68 /* Product cards */69 .compare-cards {70 display: flex;71 gap: 30px;72 padding: 0 24px 8px 24px;73 box-sizing: border-box;74 }75 .product-card {76 width: 320px;77 }78 .prod-img {79 width: 320px;80 height: 220px;81 background: #E0E0E0;82 border: 1px solid #BDBDBD;83 color: #757575;84 display: flex;85 align-items: center;86 justify-content: center;87 font-size: 26px;88 }89 .prod-name {90 font-size: 34px;91 margin-top: 12px;92 white-space: nowrap;93 overflow: hidden;94 text-overflow: ellipsis;95 }96 .rating {97 color: #2e7d32;98 font-size: 34px;99 margin-top: 6px;100 }101 .price-row {102 display: flex;103 align-items: baseline;104 gap: 16px;105 margin-top: 6px;106 }107 .price {108 font-size: 42px;109 font-weight: 700;110 }111 .old-price {112 font-size: 34px;113 color: #9e9e9e;114 text-decoration: line-through;115 }116 117 /* Spec comparison grid */118 .spec-table {119 margin-top: 20px;120 border-top: 1px solid #e0e0e0;121 border-bottom: 1px solid #e0e0e0;122 }123 .spec-row {124 display: grid;125 grid-template-columns: 1.4fr 1fr 1fr 1fr;126 min-height: 98px;127 align-items: center;128 font-size: 34px;129 }130 .spec-cell {131 padding: 26px;132 box-sizing: border-box;133 border-bottom: 1px solid #eeeeee;134 }135 .spec-cell.label {136 background: #f5f5f5;137 color: #616161;138 font-weight: 600;139 }140 .spec-row:last-child .spec-cell { border-bottom: none; }141 142 /* View similar */143 .view-similar {144 display: flex;145 align-items: center;146 gap: 18px;147 padding: 26px 24px;148 font-size: 38px;149 }150 .doc-icon {151 width: 44px; height: 44px;152 display: inline-flex; align-items: center; justify-content: center;153 }154 155 /* Frequently bought */156 .fbt {157 padding: 10px 24px 0 24px;158 }159 .fbt-title {160 font-size: 44px;161 font-weight: 700;162 margin-bottom: 12px;163 }164 .fbt-item {165 display: flex;166 align-items: center;167 gap: 22px;168 padding-bottom: 18px;169 }170 .small-img {171 width: 120px;172 height: 120px;173 background: #E0E0E0;174 border: 1px solid #BDBDBD;175 color: #757575;176 display: flex;177 align-items: center;178 justify-content: center;179 font-size: 22px;180 }181 .fbt-text {182 font-size: 36px;183 color: #616161;184 white-space: nowrap;185 overflow: hidden;186 text-overflow: ellipsis;187 }188 189 /* Bottom actions */190 .bottom-bar {191 position: absolute;192 bottom: 24px;193 left: 0;194 width: 100%;195 display: flex;196 justify-content: space-between;197 padding: 0 24px;198 box-sizing: border-box;199 align-items: center;200 }201 .cart-mini {202 width: 120px; height: 120px;203 border-radius: 20px;204 border: 1px solid #e0e0e0;205 background: #ffffff;206 display: flex;207 align-items: center;208 justify-content: center;209 }210 .btn-outline {211 width: 430px; height: 120px;212 border-radius: 20px;213 border: 1px solid #d0d0d0;214 background: #ffffff;215 font-size: 40px;216 font-weight: 700;217 color: #212121;218 display: flex; align-items: center; justify-content: center;219 }220 .btn-yellow {221 width: 500px; height: 120px;222 border-radius: 20px;223 background: #ffc107;224 color: #212121;225 font-size: 44px; font-weight: 700;226 display: flex; align-items: center; justify-content: center;227 box-shadow: 0 4px 8px rgba(0,0,0,0.15);228 }229 230 /* Floating help button */231 .floating-help {232 position: absolute;233 right: 32px;234 bottom: 160px;235 width: 140px; height: 140px;236 background: #224df6;237 border-radius: 70px;238 box-shadow: 0 10px 18px rgba(0,0,0,0.25);239 display: flex; align-items: center; justify-content: center;240 color: #fff;241 font-size: 64px;242 font-weight: 900;243 }244</style>245</head>246<body>247<div id="render-target">248 249 <!-- Top bar with back, search, cart -->250 <div class="top-bar">251 <div class="top-row">252 <div class="icon-btn" aria-label="Back">253 <svg width="48" height="48" viewBox="0 0 48 48">254 <path d="M28 8 L12 24 L28 40" fill="none" stroke="#424242" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 <div class="search-wrap">258 <svg width="40" height="40" viewBox="0 0 48 48" style="margin-right:12px">259 <circle cx="20" cy="20" r="12" fill="none" stroke="#757575" stroke-width="4"/>260 <line x1="30" y1="30" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"/>261 </svg>262 <div class="search-text">Search for products</div>263 <svg width="40" height="40" viewBox="0 0 48 48">264 <rect x="18" y="8" width="12" height="20" rx="6" fill="#757575"/>265 <line x1="24" y1="28" x2="24" y2="40" stroke="#757575" stroke-width="4" stroke-linecap="round"/>266 <line x1="16" y1="40" x2="32" y2="40" stroke="#757575" stroke-width="4" stroke-linecap="round"/>267 </svg>268 </div>269 <div class="cart-btn" aria-label="Cart">270 <svg width="48" height="48" viewBox="0 0 48 48">271 <path d="M6 10 H12 L16 32 H36 L40 18 H18" fill="none" stroke="#424242" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>272 <circle cx="20" cy="38" r="3" fill="#424242"/>273 <circle cx="34" cy="38" r="3" fill="#424242"/>274 </svg>275 </div>276 </div>277 </div>278 279 <!-- Section title -->280 <div class="section-title">Similar Products to Compare</div>281 282 <!-- Product cards -->283 <div class="compare-cards">284 <div class="product-card">285 <div class="prod-img">[IMG: Hillgrove Drill Kit]</div>286 <div class="prod-name">Hillgrove H26H9 3 Mo...</div>287 <div class="rating">★★★★★</div>288 <div class="price-row">289 <div class="price">₹2,677</div>290 <div class="old-price">₹4,999</div>291 </div>292 </div>293 <div class="product-card">294 <div class="prod-img">[IMG: Hillgrove Orange Drill]</div>295 <div class="prod-name">Hillgrove H26H8 3 Mo...</div>296 <div class="rating">★★★★★</div>297 <div class="price-row">298 <div class="price">₹3,099</div>299 <div class="old-price">₹4,999</div>300 </div>301 </div>302 <div class="product-card">303 <div class="prod-img">[IMG: DUMDAAR Drill Set]</div>304 <div class="prod-name">DUMDAAR DM26 1250W ...</div>305 <div class="rating">★★★★★</div>306 <div class="price-row">307 <div class="price">₹2,985</div>308 <div class="old-price">₹5,000</div>309 </div>310 </div>311 </div>312 313 <!-- Spec comparison grid -->314 <div class="spec-table">315 <div class="spec-row">316 <div class="spec-cell label">Chuck Size</div>317 <div class="spec-cell">26 mm</div>318 <div class="spec-cell">26 mm</div>319 <div class="spec-cell">26 mm</div>320 </div>321 <div class="spec-row">322 <div class="spec-cell label">Power Source</div>323 <div class="spec-cell">Corded</div>324 <div class="spec-cell">Corded</div>325 <div class="spec-cell">Corded</div>326 </div>327 <div class="spec-row">328 <div class="spec-cell label">Reverse Rotation</div>329 <div class="spec-cell">Yes</div>330 <div class="spec-cell">Yes</div>331 <div class="spec-cell">Yes</div>332 </div>333 <div class="spec-row">334 <div class="spec-cell label">Type</div>335 <div class="spec-cell">Hammer Drill</div>336 <div class="spec-cell">Hammer Drill</div>337 <div class="spec-cell">Rotary Hammer Drill</div>338 </div>339 <div class="spec-row">340 <div class="spec-cell label">Brand</div>341 <div class="spec-cell">Hillgrove</div>342 <div class="spec-cell">Hillgrove</div>343 <div class="spec-cell">DUMDAAR</div>344 </div>345 </div>346 347 <!-- View similar -->348 <div class="view-similar">349 <div class="doc-icon">350 <svg width="44" height="44" viewBox="0 0 48 48">351 <rect x="8" y="6" width="32" height="36" rx="4" fill="none" stroke="#616161" stroke-width="4"/>352 <line x1="14" y1="16" x2="34" y2="16" stroke="#616161" stroke-width="4"/>353 <line x1="14" y1="24" x2="34" y2="24" stroke="#616161" stroke-width="4"/>354 </svg>355 </div>356 <div>View Similar</div>357 </div>358 359 <!-- Frequently bought together -->360 <div class="fbt">361 <div class="fbt-title">Frequently Bought Together</div>362 <div class="fbt-item">363 <div class="small-img">[IMG: Drill Box]</div>364 <div class="fbt-text">With Hillgrove H26H4 All Purpose 26mm Ham...</div>365 </div>366 </div>367 368 <!-- Bottom actions -->369 <div class="bottom-bar">370 <div class="cart-mini" aria-label="Cart with add">371 <svg width="76" height="76" viewBox="0 0 48 48">372 <path d="M6 12 H12 L16 32 H36 L40 20 H18" fill="none" stroke="#424242" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>373 <circle cx="20" cy="36" r="3" fill="#424242"/>374 <circle cx="34" cy="36" r="3" fill="#424242"/>375 <line x1="24" y1="10" x2="24" y2="22" stroke="#1e88e5" stroke-width="3"/>376 <line x1="18" y1="16" x2="30" y2="16" stroke="#1e88e5" stroke-width="3"/>377 </svg>378 </div>379 <div class="btn-outline">Pay with EMI</div>380 <div class="btn-yellow">Buy now</div>381 </div>382 383 <!-- Floating help button -->384 <div class="floating-help">f</div>385 386</div>387</body>388</html>