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 Details - Mobile UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #212121; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status bar */18 .status-bar {19 height: 110px;20 display: flex;21 align-items: center;22 padding: 0 36px;23 color: #616161;24 font-size: 36px;25 }26 .status-icons {27 margin-left: 24px;28 display: flex;29 gap: 30px;30 align-items: center;31 }32 .status-icons svg { width: 36px; height: 36px; fill: #9e9e9e; }33 34 /* Header search */35 .header {36 display: flex;37 align-items: center;38 padding: 14px 32px;39 gap: 24px;40 }41 .icon-btn {42 width: 64px;43 height: 64px;44 display: flex;45 align-items: center;46 justify-content: center;47 }48 .icon-btn svg { width: 48px; height: 48px; stroke: #424242; fill: none; stroke-width: 2; }49 50 .search-box {51 flex: 1;52 height: 96px;53 background: #f1f3f4;54 border-radius: 20px;55 display: flex;56 align-items: center;57 padding: 0 28px;58 gap: 18px;59 border: 1px solid #e0e0e0;60 }61 .search-input {62 color: #757575;63 font-size: 38px;64 flex: 1;65 }66 .search-box svg { width: 44px; height: 44px; fill: none; stroke: #757575; stroke-width: 2.5; }67 .cart-icon svg { width: 48px; height: 48px; stroke: #424242; fill: none; stroke-width: 2; }68 69 /* Specs grid */70 .specs {71 display: grid;72 grid-template-columns: 1fr 1fr;73 row-gap: 26px;74 column-gap: 24px;75 padding: 20px 40px;76 margin-top: 6px;77 }78 .spec-label { color: #9e9e9e; font-size: 38px; }79 .spec-value { color: #212121; font-size: 40px; font-weight: 600; }80 81 /* Details text */82 .section-title {83 font-size: 44px;84 font-weight: 700;85 padding: 16px 40px;86 margin-top: 6px;87 }88 .details-text {89 font-size: 38px;90 line-height: 1.6;91 color: #424242;92 padding: 0 40px;93 }94 .link-more { color: #1a73e8; font-weight: 600; }95 96 .divider-space { height: 40px; }97 .list-row {98 padding: 30px 40px;99 display: flex;100 align-items: center;101 justify-content: space-between;102 border-top: 1px solid #e0e0e0;103 border-bottom: 1px solid #e0e0e0;104 font-size: 40px;105 font-weight: 700;106 }107 .chevron-right {108 width: 46px; height: 46px;109 }110 .chevron-right svg { width: 100%; height: 100%; stroke: #424242; fill: none; stroke-width: 3; }111 112 .soft-divider {113 height: 12px;114 background: #f3eaf5;115 border-top: 1px solid #e0e0e0;116 border-bottom: 1px solid #e0e0e0;117 margin-top: 6px;118 }119 120 /* Similar products */121 .similar-header {122 padding: 30px 40px 10px 40px;123 display: flex;124 align-items: center;125 justify-content: space-between;126 }127 .similar-title { font-size: 44px; font-weight: 700; }128 .round-arrow {129 width: 72px; height: 72px; border-radius: 36px;130 border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center;131 background: #ffffff;132 }133 .round-arrow svg { width: 42px; height: 42px; stroke: #5f6368; fill: none; stroke-width: 3; }134 135 .cards {136 padding: 10px 24px 220px 24px;137 display: flex;138 gap: 24px;139 }140 .card {141 width: 328px;142 border: 1px solid #e0e0e0;143 border-radius: 20px;144 background: #ffffff;145 overflow: hidden;146 }147 .img-placeholder {148 width: 100%;149 height: 260px;150 background: #E0E0E0;151 border-bottom: 1px solid #BDBDBD;152 display: flex; align-items: center; justify-content: center;153 color: #757575; font-size: 32px;154 }155 .card-body { padding: 18px 20px 24px 20px; }156 .brand { font-size: 34px; color: #9e9e9e; }157 .name { font-size: 36px; color: #212121; margin-top: 6px; }158 .price-row { margin-top: 12px; font-size: 34px; }159 .old { color: #9e9e9e; text-decoration: line-through; margin-right: 10px; }160 .new { color: #212121; font-weight: 700; }161 .offer { color: #1b8e2f; font-weight: 700; margin-top: 6px; font-size: 32px; }162 163 .rating {164 display: flex;165 align-items: center;166 gap: 6px;167 margin-top: 8px;168 }169 .rating svg { width: 28px; height: 28px; fill: #1b8e2f; }170 .rating-count { color: #757575; font-size: 30px; margin-left: 6px; }171 .deal { color: #1b8e2f; font-size: 32px; margin-top: 10px; }172 173 /* Bottom action bar */174 .bottom-bar {175 position: absolute;176 left: 0; right: 0; bottom: 0;177 padding: 24px 24px 60px 24px;178 background: #ffffff;179 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);180 }181 .actions {182 display: grid;183 grid-template-columns: 1fr 1.4fr 1fr;184 gap: 24px;185 }186 .btn {187 height: 120px;188 border-radius: 16px;189 display: flex; align-items: center; justify-content: center;190 font-size: 40px; font-weight: 700;191 border: 1px solid #e0e0e0; background: #ffffff; color: #212121;192 }193 .btn svg { width: 52px; height: 52px; stroke: #424242; fill: none; stroke-width: 2.5; margin-right: 16px; }194 .btn-yellow { background: #ffc107; border-color: #ffa000; color: #212121; }195 196 /* Floating help badge */197 .floating-help {198 position: absolute;199 right: 32px;200 bottom: 240px;201 width: 120px; height: 120px;202 border-radius: 60px;203 background: #2a6bf4;204 box-shadow: 0 10px 24px rgba(0,0,0,0.2);205 display: flex; align-items: center; justify-content: center;206 border: 6px solid #ffd54f;207 color: #fff; font-size: 54px; font-weight: 900;208 }209 210 /* Home indicator */211 .home-indicator {212 position: absolute;213 bottom: 18px; left: 50%;214 transform: translateX(-50%);215 width: 320px; height: 14px; border-radius: 7px; background: #0f0f0f;216 opacity: 0.7;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Android-like status bar -->224 <div class="status-bar">225 <div style="font-weight:600;">11:47</div>226 <div class="status-icons">227 <!-- Magnifier -->228 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#9e9e9e" fill="none" stroke-width="2"></circle><line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#9e9e9e" stroke-width="2" /></svg>229 <!-- Share dot icon -->230 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="6" r="2"></circle><circle cx="18" cy="18" r="2"></circle><line x1="8" y1="12" x2="16" y2="6" stroke="#9e9e9e" stroke-width="2"></line><line x1="8" y1="12" x2="16" y2="18" stroke="#9e9e9e" stroke-width="2"></line></svg>231 <!-- Pin icon -->232 <svg viewBox="0 0 24 24"><path d="M12 2l4 6H8l4-6zM8 10h8l-3 9h-2l-3-9z" fill="#9e9e9e"></path></svg>233 <!-- Dot -->234 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"></circle></svg>235 <!-- Signal -->236 <svg viewBox="0 0 24 24"><path d="M4 18h2v-4H4v4zm4 0h2v-8H8v8zm4 0h2V6h-2v12zm4 0h2V4h-2v14z" fill="#9e9e9e"></path></svg>237 <!-- Battery -->238 <svg viewBox="0 0 26 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#9e9e9e" fill="none" stroke-width="2"></rect><rect x="22" y="10" width="2.5" height="4" fill="#9e9e9e"></rect><rect x="4" y="8" width="14" height="8" fill="#9e9e9e"></rect></svg>239 </div>240 </div>241 242 <!-- Header with back arrow, search box, cart -->243 <div class="header">244 <div class="icon-btn">245 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#424242" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>246 </div>247 <div class="search-box">248 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"/></svg>249 <div class="search-input">Search for products</div>250 <svg viewBox="0 0 24 24"><rect x="10" y="5" width="4" height="9" rx="2"></rect><path d="M9 15h6v3a3 3 0 0 1-3 3 3 3 0 0 1-3-3v-3z"></path></svg>251 </div>252 <div class="icon-btn cart-icon">253 <svg viewBox="0 0 24 24"><path d="M3 5h2l2 10h10l2-7H7" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="10" cy="19" r="1.8"></circle><circle cx="17" cy="19" r="1.8"></circle></svg>254 </div>255 </div>256 257 <!-- Specs -->258 <div class="specs">259 <div class="spec-label">Outer material</div>260 <div class="spec-value">PU</div>261 262 <div class="spec-label">Occasion</div>263 <div class="spec-value">Sports</div>264 265 <div class="spec-label">Type For Sports</div>266 <div class="spec-value">Running Shoes</div>267 </div>268 269 <!-- Details -->270 <div class="section-title">Details</div>271 <div class="details-text">272 When the road beckons, answer the call in a lightweight pair that'll keep you moving mile after mile. Soft foam cushions your stride and a reinforced heel delivers a smooth, stable ride. Crafted from ... <span class="link-more">more</span>273 </div>274 275 <div class="divider-space"></div>276 277 <div class="list-row">278 <div>All Details</div>279 <div class="chevron-right">280 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>281 </div>282 </div>283 284 <div class="soft-divider"></div>285 286 <!-- Similar products header -->287 <div class="similar-header">288 <div class="similar-title">Similar Products</div>289 <div class="round-arrow">290 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>291 </div>292 </div>293 294 <!-- Cards -->295 <div class="cards">296 <!-- Card 1 -->297 <div class="card">298 <div class="img-placeholder">[IMG: Black Running Shoes]</div>299 <div class="card-body">300 <div class="brand">NIKE</div>301 <div class="name">Revolution 5 Runnin...</div>302 <div class="price-row"><span class="old">3,695</span><span class="new">₹2,586</span></div>303 <div class="offer">30% off</div>304 <div class="rating">305 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>306 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>307 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>308 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>309 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>310 <div class="rating-count">(50)</div>311 </div>312 <div class="deal">Big Saving Deal</div>313 </div>314 </div>315 316 <!-- Card 2 -->317 <div class="card">318 <div class="img-placeholder">[IMG: Adidas Green Shoes]</div>319 <div class="card-body">320 <div style="color:#9e9e9e; font-size:30px;">Sponsored</div>321 <div class="brand" style="margin-top:6px;">ADIDAS</div>322 <div class="name">Percepto M Runnin...</div>323 <div class="price-row"><span class="old">4,999</span><span class="new">₹2,040</span></div>324 <div class="offer">59% off</div>325 <div class="rating">326 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>327 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>328 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>329 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>330 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>331 <div class="rating-count">(36)</div>332 </div>333 <div class="deal">Big Saving Deal</div>334 </div>335 </div>336 337 <!-- Card 3 -->338 <div class="card">339 <div class="img-placeholder">[IMG: Light Grey Running Shoes]</div>340 <div class="card-body">341 <div class="brand">NIKE</div>342 <div class="name">Revolution 6</div>343 <div class="price-row"><span class="old">3,695</span><span class="new">₹2,880</span></div>344 <div class="offer">22% off</div>345 <div class="rating">346 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>347 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>348 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>349 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>350 <svg viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.4 5.2 1.3 7.3L12 19l-6.6 3.3 1.3-7.3-5.4-5.2 7.4-1.1z"/></svg>351 </div>352 <div class="deal">Big Saving Deal</div>353 </div>354 </div>355 </div>356 357 <!-- Floating help badge -->358 <div class="floating-help">F</div>359 360 <!-- Bottom actions -->361 <div class="bottom-bar">362 <div class="actions">363 <div class="btn">364 <svg viewBox="0 0 24 24"><path d="M3 5h2l2 10h10l2-7H7" stroke-linecap="round" stroke-linejoin="round"></path><line x1="17" y1="8" x2="21" y2="8"></line><line x1="19" y1="6" x2="19" y2="10"></line></svg>365 <span>Cart</span>366 </div>367 <div class="btn">Pay with EMI</div>368 <div class="btn btn-yellow">Buy now</div>369 </div>370 </div>371 372 <!-- Home indicator -->373 <div class="home-indicator"></div>374 375</div>376</body>377</html>