GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Levi's Jeans Listing - Mobile UI</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 }14 15 /* General */16 .row { display: flex; align-items: center; }17 .spacer { flex: 1; }18 .text-muted { color: #757575; }19 .bold { font-weight: 700; }20 .green { color: #2e7d32; }21 .gray { color: #9E9E9E; }22 .small { font-size: 28px; }23 .strike { text-decoration: line-through; color: #9E9E9E; }24 .pill {25 border: 1px solid #D0D0D0;26 border-radius: 40px;27 padding: 16px 26px;28 font-size: 32px;29 color: #2c2c2c;30 background: #fff;31 }32 .icon-btn {33 width: 72px; height: 72px;34 display: flex; align-items: center; justify-content: center;35 border-radius: 16px;36 }37 /* Status Bar */38 .status-bar {39 height: 80px;40 padding: 0 24px;41 font-size: 34px;42 color: #1c1c1c;43 }44 /* Header */45 .header {46 height: 120px;47 padding: 0 24px;48 border-bottom: 1px solid #eee;49 }50 .title {51 font-size: 44px;52 font-weight: 700;53 margin-left: 12px;54 }55 /* Filter chips */56 .chips { padding: 20px 24px 10px; gap: 18px; flex-wrap: wrap; }57 .secondary-chips { padding: 10px 24px 20px; gap: 18px; flex-wrap: wrap; }58 .chip-icon {59 width: 40px; height: 40px; border-radius: 50%; background: #fff;60 border: 1px solid #D0D0D0; display: inline-flex; align-items: center; justify-content: center; margin-right: 12px;61 }62 /* Ad banner */63 .ad-banner {64 margin: 0 24px;65 border: 1px solid #BDBDBD;66 border-radius: 16px;67 overflow: hidden;68 background: #faf7ff;69 }70 .ad-top { height: 320px; display: flex; }71 .ad-left, .ad-right {72 flex: 1;73 display: flex;74 align-items: center; justify-content: center;75 border-right: 1px dashed #e0e0e0;76 }77 .ad-right { border-right: none; }78 .ad-img {79 width: 100%; height: 100%;80 background: #E0E0E0; border: 1px solid #BDBDBD;81 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;82 }83 .ad-footer {84 background: #fff;85 padding: 22px 24px;86 font-size: 34px;87 }88 .ad-cta { display: flex; align-items: center; gap: 12px; color: #333; }89 /* Product grid */90 .product-grid { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }91 .card {92 border: 1px solid #e5e5e5;93 border-radius: 16px;94 overflow: hidden;95 background: #fff;96 }97 .img-wrap {98 position: relative;99 height: 880px;100 background: #E0E0E0;101 border-bottom: 1px solid #e5e5e5;102 display: flex; align-items: center; justify-content: center;103 color: #757575; font-size: 36px;104 }105 .heart {106 position: absolute;107 top: 24px; right: 24px;108 width: 82px; height: 82px;109 background: #fff;110 border-radius: 40px;111 box-shadow: 0 2px 8px rgba(0,0,0,0.15);112 display: flex; align-items: center; justify-content: center;113 }114 .card-body { padding: 22px; }115 .brand { font-size: 36px; font-weight: 700; }116 .price-row { margin-top: 10px; display: flex; align-items: baseline; gap: 16px; }117 .discount { color: #2e7d32; font-size: 34px; font-weight: 700; }118 .price { font-size: 40px; font-weight: 700; }119 .rating-row { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }120 .star { color: #2e7d32; font-size: 32px; }121 .badge {122 margin-left: 12px;123 font-size: 28px;124 color: #1e88e5;125 border: 1px solid #90caf9;126 padding: 6px 12px;127 border-radius: 16px;128 background: #e3f2fd;129 display: inline-flex; align-items: center; gap: 8px;130 }131 .delivery { margin-top: 12px; font-size: 32px; }132 .choice {133 position: absolute;134 bottom: 12px; left: 12px;135 background: #2b2b2b; color: #fff;136 font-size: 28px; padding: 8px 12px; border-radius: 10px;137 }138 139 /* Simple SVG icons */140 svg { display: block; }141 .battery { width: 60px; height: 30px; }142 .back-ic, .search-ic, .mic-ic, .cam-ic, .cart-ic { width: 48px; height: 48px; }143 .down-ic { width: 28px; height: 28px; margin-left: 8px; }144</style>145</head>146<body>147<div id="render-target">148 <!-- Status Bar -->149 <div class="status-bar row">150 <div>3:22</div>151 <div class="spacer"></div>152 <!-- simple signal dots -->153 <div class="row" style="gap:8px; margin-right:16px;">154 <div style="width:6px;height:6px;background:#444;border-radius:3px;"></div>155 <div style="width:6px;height:12px;background:#444;border-radius:3px;"></div>156 <div style="width:6px;height:18px;background:#444;border-radius:3px;"></div>157 <div style="width:6px;height:24px;background:#444;border-radius:3px;"></div>158 </div>159 <!-- battery -->160 <svg class="battery" viewBox="0 0 60 30">161 <rect x="1" y="6" width="50" height="18" rx="3" ry="3" fill="none" stroke="#444" stroke-width="2"/>162 <rect x="52" y="12" width="6" height="6" rx="1" fill="#444"/>163 <rect x="4" y="9" width="40" height="12" fill="#4caf50"/>164 </svg>165 <div style="margin-left:8px;">100%</div>166 </div>167 168 <!-- Header -->169 <div class="header row">170 <!-- Back -->171 <div class="icon-btn">172 <svg class="back-ic" viewBox="0 0 24 24">173 <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>174 </svg>175 </div>176 <div class="title">levis jeans for men</div>177 <div class="spacer"></div>178 <!-- Search -->179 <div class="icon-btn">180 <svg class="search-ic" viewBox="0 0 24 24">181 <circle cx="10" cy="10" r="6" fill="none" stroke="#222" stroke-width="2"/>182 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#222" stroke-width="2" stroke-linecap="round"/>183 </svg>184 </div>185 <!-- Mic -->186 <div class="icon-btn">187 <svg class="mic-ic" viewBox="0 0 24 24">188 <rect x="8" y="5" width="8" height="10" rx="4" fill="none" stroke="#222" stroke-width="2"/>189 <path d="M4 11a8 8 0 0016 0" fill="none" stroke="#222" stroke-width="2"/>190 <line x1="12" y1="19" x2="12" y2="22" stroke="#222" stroke-width="2"/>191 </svg>192 </div>193 <!-- Camera -->194 <div class="icon-btn">195 <svg class="cam-ic" viewBox="0 0 24 24">196 <rect x="3" y="7" width="18" height="12" rx="2" fill="none" stroke="#222" stroke-width="2"/>197 <circle cx="12" cy="13" r="4" fill="none" stroke="#222" stroke-width="2"/>198 <path d="M7 7l2-3h6l2 3" fill="none" stroke="#222" stroke-width="2"/>199 </svg>200 </div>201 <!-- Cart -->202 <div class="icon-btn">203 <svg class="cart-ic" viewBox="0 0 24 24">204 <circle cx="9" cy="20" r="2" fill="#222"/>205 <circle cx="17" cy="20" r="2" fill="#222"/>206 <path d="M3 4h3l2 12h10l2-8H7" fill="none" stroke="#222" stroke-width="2"/>207 </svg>208 </div>209 </div>210 211 <!-- Primary chips -->212 <div class="chips row">213 <div class="pill">Sort By214 <svg class="down-ic" viewBox="0 0 24 24">215 <path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"/>216 </svg>217 </div>218 <div class="pill row">219 <svg class="down-ic" viewBox="0 0 24 24">220 <rect x="5" y="5" width="14" height="14" fill="none" stroke="#555" stroke-width="2"/>221 </svg>222 <span style="margin-left:8px;">Filter</span>223 </div>224 <div class="pill">Brand225 <svg class="down-ic" viewBox="0 0 24 24">226 <path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"/>227 </svg>228 </div>229 <div class="pill">Size230 <svg class="down-ic" viewBox="0 0 24 24">231 <path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"/>232 </svg>233 </div>234 <div class="pill">Fit235 <svg class="down-ic" viewBox="0 0 24 24">236 <path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2"/>237 </svg>238 </div>239 </div>240 241 <!-- Secondary chips -->242 <div class="secondary-chips row">243 <div class="pill row">244 <div class="chip-icon">★</div>245 <div>246 <div class="bold small">Top</div>247 <div class="small gray">Rated</div>248 </div>249 </div>250 <div class="pill row">251 <div class="chip-icon">🏅</div>252 <div>253 <div class="bold small">Premium</div>254 <div class="small gray">Brands</div>255 </div>256 </div>257 <div class="pill row">258 <div class="chip-icon">🎨</div>259 <div class="bold small">Black</div>260 </div>261 <div class="pill row">262 <div class="chip-icon">%</div>263 <div>264 <div class="bold small">60% or</div>265 <div class="small gray">more</div>266 </div>267 </div>268 </div>269 270 <!-- Ad banner -->271 <div class="ad-banner">272 <div class="ad-top">273 <div class="ad-left">274 <div class="ad-img">[IMG: Levi's Logo]</div>275 </div>276 <div class="ad-right">277 <div class="ad-img">[IMG: Model wearing light blue jeans]</div>278 </div>279 </div>280 <div class="ad-footer row">281 <div class="ad-cta">282 <span class="bold">Minimum 50% Off on Levi's</span>283 </div>284 <div class="spacer"></div>285 <svg class="back-ic" viewBox="0 0 24 24">286 <path d="M9 6l6 6-6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>287 </svg>288 </div>289 </div>290 291 <!-- Product Grid -->292 <div class="product-grid">293 <!-- Card 1 -->294 <div class="card">295 <div class="img-wrap">296 <div>[IMG: Model wearing dark blue Levi's jeans with sandals]</div>297 <div class="heart">298 <svg viewBox="0 0 24 24" width="40" height="40">299 <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5 3 3 6.5C19 16.65 12 21 12 21z" fill="none" stroke="#555" stroke-width="2"/>300 </svg>301 </div>302 </div>303 <div class="card-body">304 <div class="brand">LEVI'S</div>305 <div class="price-row">306 <div class="discount">40% off</div>307 <div class="strike">3,199</div>308 <div class="price">₹1,919</div>309 </div>310 <div class="rating-row">311 <span class="star">★ ★ ★ ★ ★</span>312 <span class="gray">(246)</span>313 <span class="badge">Plus F-ASSURED</span>314 </div>315 <div class="delivery">Free delivery by <span class="bold">Today</span></div>316 </div>317 </div>318 319 <!-- Card 2 -->320 <div class="card" style="position:relative;">321 <div class="img-wrap">322 <div>[IMG: Model wearing charcoal Levi's jeans with boots]</div>323 <div class="heart">324 <svg viewBox="0 0 24 24" width="40" height="40">325 <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5 3 3 6.5C19 16.65 12 21 12 21z" fill="none" stroke="#555" stroke-width="2"/>326 </svg>327 </div>328 </div>329 <div class="card-body">330 <div class="brand">LEVI'S</div>331 <div class="price-row">332 <div class="discount">40% off</div>333 <div class="strike">3,199</div>334 <div class="price">₹1,919</div>335 </div>336 <div class="small gray" style="margin-top:8px;">Hot Deal</div>337 <div class="rating-row">338 <span class="star">★ ★ ★ ★ ☆</span>339 <span class="gray">(2,309)</span>340 <span class="badge">Plus F-ASSURED</span>341 </div>342 <div class="delivery">Free delivery by <span class="bold">Today</span></div>343 </div>344 <div class="choice">FLIPKART'S CHOICE</div>345 </div>346 </div>347 348 <!-- Bottom cropped preview (optional visual continuation) -->349 <div class="row" style="padding: 0 24px;">350 <div class="card" style="width: 504px; height: 380px; overflow: hidden; margin-right:24px;">351 <div class="img-wrap" style="height: 260px;">352 <div>[IMG: Model wearing blue jeans with orange top]</div>353 </div>354 </div>355 <div class="card" style="width: 504px; height: 380px; overflow: hidden;">356 <div class="img-wrap" style="height: 260px;">357 <div>[IMG: Model wearing blue jeans - cropped preview]</div>358 </div>359 </div>360 </div>361</div>362</body>363</html>