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>Similar Items - Product Grid</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Render Target */16 #render-target {17 width: 1080px;18 height: 2400px;19 position: relative;20 overflow: hidden;21 background: #ffffff;22 }23 24 /* Status bar mock */25 .status-bar {26 height: 120px;27 background: #e7e7e7;28 color: #333;29 font-size: 34px;30 line-height: 1;31 display: flex;32 align-items: center;33 justify-content: space-between;34 padding: 0 32px;35 box-sizing: border-box;36 }37 .status-left {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-right {43 display: flex;44 align-items: center;45 gap: 26px;46 }47 .status-icon svg {48 width: 34px;49 height: 34px;50 stroke: #333;51 fill: none;52 stroke-width: 2;53 }54 55 /* App bar */56 .app-bar {57 height: 96px;58 display: flex;59 align-items: center;60 justify-content: space-between;61 padding: 0 32px;62 box-sizing: border-box;63 }64 .app-left, .app-right {65 display: flex;66 align-items: center;67 gap: 28px;68 }69 .icon-btn {70 width: 56px;71 height: 56px;72 display: flex;73 align-items: center;74 justify-content: center;75 cursor: default;76 }77 .icon-btn svg {78 width: 36px;79 height: 36px;80 stroke: #1f1f1f;81 fill: none;82 stroke-width: 2.2;83 }84 85 /* Hero image placeholder */86 .hero {87 width: 100%;88 height: 520px;89 background: #E0E0E0;90 border-top: 1px solid #BDBDBD;91 border-bottom: 1px solid #BDBDBD;92 display: flex;93 align-items: center;94 justify-content: center;95 color: #666;96 font-size: 28px;97 letter-spacing: 0.5px;98 }99 100 /* Section header */101 .section-header {102 border-top: 2px solid #E0E0E0;103 border-bottom: 2px solid #E0E0E0;104 padding: 28px 32px;105 display: flex;106 align-items: baseline;107 gap: 18px;108 box-sizing: border-box;109 background: #fff;110 }111 .section-title {112 font-size: 32px;113 letter-spacing: 2px;114 color: #222;115 }116 .section-sub {117 font-size: 26px;118 color: #777;119 }120 121 /* Product grid */122 .grid {123 display: grid;124 grid-template-columns: 1fr 1fr;125 width: 100%;126 }127 .card {128 position: relative;129 border-right: 1px solid #e1e1e1;130 border-bottom: 1px solid #e1e1e1;131 box-sizing: border-box;132 background: #fff;133 }134 .card:nth-child(2n) {135 border-right: none;136 }137 .card-image {138 height: 700px;139 background: #E0E0E0;140 border-bottom: 1px solid #BDBDBD;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #757575;145 font-size: 28px;146 position: relative;147 }148 .add-btn {149 position: absolute;150 left: 50%;151 bottom: 26px;152 transform: translateX(-50%);153 width: 86px;154 height: 86px;155 border-radius: 50%;156 background: rgba(255,255,255,0.92);157 border: 1px solid #cfcfcf;158 display: flex;159 align-items: center;160 justify-content: center;161 }162 .add-btn svg {163 width: 40px;164 height: 40px;165 stroke: #555;166 stroke-width: 2.5;167 fill: none;168 }169 .card-meta {170 padding: 26px 28px 30px;171 display: grid;172 grid-template-columns: 1fr auto;173 grid-template-rows: auto auto;174 gap: 12px 10px;175 box-sizing: border-box;176 }177 .card-title {178 grid-column: 1 / 2;179 grid-row: 1 / 2;180 font-size: 28px;181 color: #222;182 letter-spacing: 1px;183 }184 .meta-bookmark {185 grid-column: 2 / 3;186 grid-row: 1 / 2;187 align-self: start;188 }189 .meta-bookmark svg {190 width: 36px;191 height: 36px;192 stroke: #444;193 fill: none;194 stroke-width: 2.2;195 }196 .price-row {197 grid-column: 1 / 3;198 grid-row: 2 / 3;199 display: flex;200 align-items: center;201 gap: 12px;202 }203 .price {204 font-size: 26px;205 color: #333;206 }207 .price-old {208 font-size: 24px;209 color: #999;210 text-decoration: line-through;211 }212 .price-badge {213 font-size: 24px;214 color: #1e1e1e;215 background: #fff59d;216 padding: 6px 10px;217 border-radius: 4px;218 }219 220 /* Floating OS bubble (approximation) */221 .os-bubble {222 position: absolute;223 left: 24px;224 top: 1320px;225 width: 116px;226 height: 116px;227 background: #E0E0E0;228 border: 1px solid #BDBDBD;229 border-radius: 50%;230 display: flex;231 align-items: center;232 justify-content: center;233 color: #6a6a6a;234 font-size: 20px;235 }236 237 /* Bottom gesture bar */238 .gesture-bar {239 position: absolute;240 bottom: 22px;241 left: 50%;242 transform: translateX(-50%);243 width: 320px;244 height: 12px;245 background: #c9c9c9;246 border-radius: 12px;247 }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div class="status-left">256 <div>8:48</div>257 <div class="status-icon">258 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>259 </div>260 <div class="status-icon">261 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="12" rx="2"/></svg>262 </div>263 <div class="status-icon">264 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="12" rx="2"/></svg>265 </div>266 <div class="status-icon">267 <svg viewBox="0 0 24 24"><path d="M3 18c4-4 14-4 18 0"/><path d="M6 15c3-3 9-3 12 0"/><path d="M9 12c2-2 6-2 8 0"/></svg>268 </div>269 </div>270 <div class="status-right">271 <div class="status-icon">272 <svg viewBox="0 0 24 24"><path d="M2 18c6-6 14-6 20 0" /><path d="M6 14c4-4 8-4 12 0" /><circle cx="12" cy="18" r="1.5"/></svg>273 </div>274 <div class="status-icon">275 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2"/><rect x="20" y="9" width="2" height="6"/></svg>276 </div>277 </div>278 </div>279 280 <!-- App Bar with controls -->281 <div class="app-bar">282 <div class="app-left">283 <div class="icon-btn" aria-label="Close">284 <svg viewBox="0 0 24 24">285 <path d="M5 5 L19 19"></path>286 <path d="M19 5 L5 19"></path>287 </svg>288 </div>289 </div>290 <div class="app-right">291 <div class="icon-btn" aria-label="Share">292 <svg viewBox="0 0 24 24">293 <circle cx="6" cy="12" r="2"></circle>294 <circle cx="12" cy="6" r="2"></circle>295 <circle cx="18" cy="14" r="2"></circle>296 <path d="M7.8 11.1 L10.5 7.9 L16.2 12.6"></path>297 </svg>298 </div>299 <div class="icon-btn" aria-label="Bookmark">300 <svg viewBox="0 0 24 24">301 <path d="M6 3h12v17l-6-4-6 4z"></path>302 </svg>303 </div>304 </div>305 </div>306 307 <!-- Hero placeholder -->308 <div class="hero">[IMG: Model wearing black shearling-collar jacket]</div>309 310 <!-- Section header -->311 <div class="section-header">312 <div class="section-title">SIMILAR ITEMS</div>313 <div class="section-sub">10 items</div>314 </div>315 316 <!-- Product grid -->317 <div class="grid">318 <!-- Card 1 -->319 <div class="card">320 <div class="card-image">321 [IMG: Faux leather biker jacket]322 <div class="add-btn" aria-label="Add">323 <svg viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="9"></circle>325 <path d="M12 8v8M8 12h8"></path>326 </svg>327 </div>328 </div>329 <div class="card-meta">330 <div class="card-title">FAUX LEATHER BIKER JACKET</div>331 <div class="meta-bookmark">332 <svg viewBox="0 0 24 24"><path d="M6 3h12v17l-6-4-6 4z"></path></svg>333 </div>334 <div class="price-row">335 <div class="price">69.90 USD</div>336 </div>337 </div>338 </div>339 340 <!-- Card 2 -->341 <div class="card">342 <div class="card-image">343 [IMG: Faux leather jacket]344 <div class="add-btn" aria-label="Add">345 <svg viewBox="0 0 24 24">346 <circle cx="12" cy="12" r="9"></circle>347 <path d="M12 8v8M8 12h8"></path>348 </svg>349 </div>350 </div>351 <div class="card-meta">352 <div class="card-title">FAUX LEATHER JACKET</div>353 <div class="meta-bookmark">354 <svg viewBox="0 0 24 24"><path d="M6 3h12v17l-6-4-6 4z"></path></svg>355 </div>356 <div class="price-row">357 <div class="price-old">69.90 USD</div>358 <div class="price-badge">-28% 49.99 USD</div>359 </div>360 </div>361 </div>362 363 <!-- Card 3 -->364 <div class="card">365 <div class="card-image">366 [IMG: Distressed faux leather biker jacket]367 <div class="add-btn" aria-label="Add">368 <svg viewBox="0 0 24 24">369 <circle cx="12" cy="12" r="9"></circle>370 <path d="M12 8v8M8 12h8"></path>371 </svg>372 </div>373 </div>374 <div class="card-meta">375 <div class="card-title">DISTRESSED FAUX LEATHER JACKET</div>376 <div class="meta-bookmark">377 <svg viewBox="0 0 24 24"><path d="M6 3h12v17l-6-4-6 4z"></path></svg>378 </div>379 <div class="price-row">380 <div class="price">79.90 USD</div>381 </div>382 </div>383 </div>384 385 <!-- Card 4 -->386 <div class="card">387 <div class="card-image">388 [IMG: Black puffer jacket]389 <div class="add-btn" aria-label="Add">390 <svg viewBox="0 0 24 24">391 <circle cx="12" cy="12" r="9"></circle>392 <path d="M12 8v8M8 12h8"></path>393 </svg>394 </div>395 </div>396 <div class="card-meta">397 <div class="card-title">PUFFER JACKET</div>398 <div class="meta-bookmark">399 <svg viewBox="0 0 24 24"><path d="M6 3h12v17l-6-4-6 4z"></path></svg>400 </div>401 <div class="price-row">402 <div class="price">99.00 USD</div>403 </div>404 </div>405 </div>406 </div>407 408 <!-- OS bubble (approximate) -->409 <div class="os-bubble">[OS]</div>410 411 <!-- Gesture bar -->412 <div class="gesture-bar"></div>413</div>414</body>415</html>