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 Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F4F4F4;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #EAEAEA;19 color: #333;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 36px;24 box-sizing: border-box;25 }26 .status-left { display: flex; align-items: center; gap: 18px; }27 .status-time { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }28 .status-right { display: flex; align-items: center; gap: 28px; }29 30 .icon { width: 42px; height: 42px; }31 .icon path, .icon rect, .icon circle, .icon line { stroke: #555; fill: none; stroke-width: 3; }32 33 /* Top actions */34 .top-actions {35 height: 100px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 padding: 0 36px;40 color: #444;41 }42 .top-actions-left { display: flex; align-items: center; gap: 24px; }43 .top-actions-right { display: flex; align-items: center; gap: 36px; }44 45 /* Hero banner */46 .hero {47 height: 540px;48 margin: 0 0 0 0;49 border-top: 1px solid #D0D0D0;50 border-bottom: 1px solid #CFCFCF;51 background: #E0E0E0;52 display: flex;53 align-items: center;54 justify-content: center;55 color: #757575;56 font-size: 34px;57 }58 .hero-inner {59 border: 1px solid #BDBDBD;60 width: 1000px; height: 440px;61 display: flex; align-items: center; justify-content: center;62 }63 64 /* Similar items header */65 .similar-header {66 height: 140px;67 background: #FFFFFF;68 display: flex;69 align-items: center;70 padding: 0 40px;71 box-sizing: border-box;72 border-bottom: 1px solid #E2E2E2;73 }74 .similar-title {75 font-size: 44px; letter-spacing: 1px; color: #222; font-weight: 500;76 text-transform: uppercase;77 }78 .similar-count {79 margin-left: 24px; font-size: 32px; color: #7A7A7A;80 }81 82 /* Grid of items */83 .grid {84 display: grid;85 grid-template-columns: 540px 540px;86 grid-auto-rows: 700px;87 width: 1080px;88 }89 .card {90 background: #FFFFFF;91 border-bottom: 1px solid #E4E4E4;92 position: relative;93 }94 .card:nth-child(odd) { border-right: 1px solid #E4E4E4; }95 .card-image {96 height: 540px;97 display: flex; align-items: center; justify-content: center;98 background: #E0E0E0; color: #757575;99 border-bottom: 1px solid #E4E4E4;100 position: relative;101 }102 .img-inner {103 width: 460px; height: 480px;104 border: 1px solid #BDBDBD;105 display: flex; align-items: center; justify-content: center;106 text-align: center; font-size: 30px; color: #757575;107 }108 .plus-overlay {109 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);110 width: 64px; height: 64px; border-radius: 32px;111 background: #FFFFFF; border: 1px solid #CFCFCF;112 display: flex; align-items: center; justify-content: center;113 }114 .plus-overlay svg { width: 32px; height: 32px; }115 .card-info {116 height: 160px;117 padding: 22px 28px;118 box-sizing: border-box;119 }120 .card-row {121 display: flex; align-items: center; justify-content: space-between; gap: 12px;122 }123 .product-name {124 font-size: 32px; color: #222; font-weight: 500;125 text-transform: uppercase;126 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;127 max-width: 420px;128 }129 .bookmark {130 width: 38px; height: 38px;131 }132 .price-row {133 margin-top: 12px; display: flex; align-items: center; gap: 14px;134 }135 .old {136 font-size: 28px; color: #8C8C8C; text-decoration: line-through;137 }138 .badge {139 background: #F3E46C; color: #1D1D1D;140 padding: 8px 12px; font-size: 28px; border-radius: 6px; font-weight: 600;141 }142 143 /* Floating widget icon (bottom-left area) */144 .floating-widget {145 position: absolute; left: 24px; top: 1520px;146 width: 120px; height: 120px; border-radius: 60px;147 background: #D9EFE0; border: 1px solid #9EC3A8;148 display: flex; align-items: center; justify-content: center;149 box-shadow: 0 4px 12px rgba(0,0,0,0.15);150 color: #3A6B4A; font-size: 26px;151 }152 153 /* Bottom navigation pill */154 .bottom-pill {155 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);156 width: 420px; height: 16px; background: #BDBDBD; border-radius: 8px;157 }158</style>159</head>160<body>161<div id="render-target">162 163 <!-- Status bar -->164 <div class="status-bar">165 <div class="status-left">166 <div class="status-time">8:49</div>167 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">168 <circle cx="12" cy="12" r="9"></circle>169 <path d="M12 6v6l4 2"></path>170 </svg>171 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">172 <rect x="2" y="9" width="3" height="10"></rect>173 <rect x="7" y="6" width="3" height="13"></rect>174 <rect x="12" y="4" width="3" height="15"></rect>175 <rect x="17" y="2" width="3" height="17"></rect>176 </svg>177 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">178 <path d="M3 18c3-3 6-4 9-4s6 1 9 4" ></path>179 <circle cx="12" cy="13" r="2"></circle>180 </svg>181 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">182 <path d="M3 7h18"></path>183 <path d="M7 7v10c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V7"></path>184 <rect x="9" y="3" width="6" height="3"></rect>185 </svg>186 </div>187 <div class="status-right">188 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">189 <path d="M2 8h7l3-3 3 3h7"></path>190 <path d="M5 8v8h14V8"></path>191 </svg>192 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">193 <rect x="3" y="6" width="18" height="12" rx="2"></rect>194 <rect x="19" y="9" width="2" height="6"></rect>195 </svg>196 </div>197 </div>198 199 <!-- Top actions -->200 <div class="top-actions">201 <div class="top-actions-left">202 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">203 <path d="M5 5l14 14M19 5L5 19"></path>204 </svg>205 </div>206 <div class="top-actions-right">207 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">208 <circle cx="6" cy="12" r="2"></circle>209 <circle cx="18" cy="6" r="2"></circle>210 <circle cx="18" cy="18" r="2"></circle>211 <path d="M7.5 11.5l8-4M7.5 12.5l8 4"></path>212 </svg>213 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">214 <path d="M6 4h12v16l-6-4-6 4V4z"></path>215 </svg>216 </div>217 </div>218 219 <!-- Hero banner -->220 <div class="hero">221 <div class="hero-inner">[IMG: Jacket model on gray background]</div>222 </div>223 224 <!-- Similar items header -->225 <div class="similar-header">226 <div class="similar-title">SIMILAR ITEMS</div>227 <div class="similar-count">10 items</div>228 </div>229 230 <!-- Grid of items -->231 <div class="grid">232 <!-- Item 1 -->233 <div class="card">234 <div class="card-image">235 <div class="img-inner">[IMG: Black cropped bomber jacket]</div>236 <div class="plus-overlay">237 <svg viewBox="0 0 24 24">238 <circle cx="12" cy="12" r="10" stroke="#999" fill="none" stroke-width="1.5"></circle>239 <path d="M12 7v10M7 12h10" stroke="#666" stroke-width="2" stroke-linecap="round"></path>240 </svg>241 </div>242 </div>243 <div class="card-info">244 <div class="card-row">245 <div class="product-name">RIB COLLAR CROPPED BOMBER...</div>246 <svg class="bookmark" viewBox="0 0 24 24" aria-hidden="true">247 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#444" fill="none" stroke-width="2"></path>248 </svg>249 </div>250 <div class="price-row">251 <span class="old">79.90 USD</span>252 <span class="badge">-24% 59.99 USD</span>253 </div>254 </div>255 </div>256 257 <!-- Item 2 -->258 <div class="card">259 <div class="card-image">260 <div class="img-inner">[IMG: Black shirt-style bomber jacket]</div>261 <div class="plus-overlay">262 <svg viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="10" stroke="#999" fill="none" stroke-width="1.5"></circle>264 <path d="M12 7v10M7 12h10" stroke="#666" stroke-width="2" stroke-linecap="round"></path>265 </svg>266 </div>267 </div>268 <div class="card-info">269 <div class="card-row">270 <div class="product-name">SHIRT STYLE BOMBER JACKET</div>271 <svg class="bookmark" viewBox="0 0 24 24" aria-hidden="true">272 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#444" fill="none" stroke-width="2"></path>273 </svg>274 </div>275 <div class="price-row">276 <span class="old">49.90 USD</span>277 <span class="badge">-47% 25.99 USD</span>278 </div>279 </div>280 </div>281 282 <!-- Item 3 -->283 <div class="card">284 <div class="card-image">285 <div class="img-inner">[IMG: Gray faux leather bomber jacket]</div>286 <div class="plus-overlay">287 <svg viewBox="0 0 24 24">288 <circle cx="12" cy="12" r="10" stroke="#999" fill="none" stroke-width="1.5"></circle>289 <path d="M12 7v10M7 12h10" stroke="#666" stroke-width="2" stroke-linecap="round"></path>290 </svg>291 </div>292 </div>293 <div class="card-info">294 <div class="card-row">295 <div class="product-name">FAUX LEATHER BOMBER</div>296 <svg class="bookmark" viewBox="0 0 24 24" aria-hidden="true">297 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#444" fill="none" stroke-width="2"></path>298 </svg>299 </div>300 <div class="price-row">301 <span class="old">69.90 USD</span>302 <span class="badge">-20% 55.99 USD</span>303 </div>304 </div>305 </div>306 307 <!-- Item 4 -->308 <div class="card">309 <div class="card-image">310 <div class="img-inner">[IMG: Black peplum faux leather jacket]</div>311 <div class="plus-overlay">312 <svg viewBox="0 0 24 24">313 <circle cx="12" cy="12" r="10" stroke="#999" fill="none" stroke-width="1.5"></circle>314 <path d="M12 7v10M7 12h10" stroke="#666" stroke-width="2" stroke-linecap="round"></path>315 </svg>316 </div>317 </div>318 <div class="card-info">319 <div class="card-row">320 <div class="product-name">PEPLUM FAUX LEATHER JACKET</div>321 <svg class="bookmark" viewBox="0 0 24 24" aria-hidden="true">322 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#444" fill="none" stroke-width="2"></path>323 </svg>324 </div>325 <div class="price-row">326 <span class="old">59.90 USD</span>327 <span class="badge">-15% 50.99 USD</span>328 </div>329 </div>330 </div>331 </div>332 333 <!-- Floating widget example -->334 <div class="floating-widget">Widget</div>335 336 <!-- Bottom navigation pill -->337 <div class="bottom-pill"></div>338</div>339</body>340</html>