GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff; border-radius: 28px;11 box-shadow: 0 8px 24px rgba(0,0,0,0.12);12 }13 .statusbar {14 height: 110px; padding: 0 28px;15 display: flex; align-items: center; justify-content: space-between;16 font-weight: 600; color: #222;17 }18 .status-left { font-size: 42px; }19 .status-right { display: flex; align-items: center; gap: 26px; }20 .icon { width: 40px; height: 40px; }21 .chip-row {22 padding: 10px 20px 0 20px;23 display: flex; gap: 16px; flex-wrap: nowrap;24 }25 .chip {26 flex: 0 0 auto;27 padding: 22px 28px;28 border-radius: 60px;29 border: 1px solid #ddd;30 font-size: 36px; color: #222;31 display: flex; align-items: center; gap: 12px;32 background: #fff;33 }34 .chev { width: 28px; height: 28px; }35 .content { padding: 0 24px; }36 .product-grid {37 display: grid;38 grid-template-columns: 1fr 1fr;39 gap: 24px;40 margin-top: 18px;41 }42 .product-card {43 border: 1px solid #e6e6e6; border-radius: 16px;44 overflow: hidden; background: #fff;45 }46 .p-header { padding: 20px; }47 .brand { font-size: 40px; font-weight: 700; color: #111; }48 .price-line { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }49 .discount { color: #20ac3d; font-weight: 800; font-size: 38px; }50 .old { color: #9e9e9e; text-decoration: line-through; font-size: 34px; }51 .new { color: #111; font-weight: 800; font-size: 40px; }52 .tag { color: #1b8ae0; font-weight: 700; font-size: 32px; margin-top: 8px; }53 .rating-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }54 .stars { color: #2AAF4B; font-size: 32px; letter-spacing: 2px; }55 .count { color: #777; font-size: 30px; }56 .assured { font-size: 26px; color: #0b7dda; background: #eaf5ff; padding: 6px 10px; border-radius: 16px; margin-left: auto;}57 .delivery { color: #333; font-size: 32px; margin-top: 8px; }58 .delivery b { font-weight: 800; }59 .p-image {60 position: relative;61 margin-top: 6px;62 height: 720px;63 display: flex; align-items: center; justify-content: center;64 background: #E0E0E0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;65 color: #757575; font-size: 38px;66 }67 .heart {68 position: absolute; right: 20px; top: 20px;69 width: 74px; height: 74px; border-radius: 50%;70 background: rgba(255,255,255,0.95); border: 1px solid #d9d9d9;71 display: flex; align-items: center; justify-content: center;72 }73 .flip-badge {74 position: absolute; left: 20px; top: 20px;75 background: #1f1f1f; color: #fff; font-size: 28px; font-weight: 800;76 padding: 10px 16px; border-radius: 10px;77 }78 .p-footer { padding: 20px; border-top: 1px solid #f0f0f0; }79 /* Purple section */80 .deals {81 position: absolute; left: 0; right: 0; bottom: 200px;82 background: #5b32e1; color: #fff;83 padding: 28px 24px 24px 24px; border-top-left-radius: 22px; border-top-right-radius: 22px;84 }85 .deals-top {86 display: flex; align-items: center; justify-content: space-between;87 }88 .deals-title { font-size: 54px; font-weight: 800; }89 .deals-sub { font-size: 34px; color: #d9ccff; margin-top: 6px; }90 .deals-arrow {91 width: 92px; height: 92px; border-radius: 50%;92 background: #fff; display: flex; align-items: center; justify-content: center; color: #5b32e1; border: 2px solid #e7e0ff;93 }94 .deal-cards {95 margin-top: 24px;96 display: flex; gap: 24px;97 overflow: hidden;98 }99 .deal-card {100 width: 312px; background: #fff; color: #111;101 border-radius: 18px; padding: 12px; flex: 0 0 auto;102 }103 .deal-img {104 width: 100%; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;105 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; border-radius: 12px;106 }107 .deal-brand { color: #777; font-size: 30px; margin-top: 12px; }108 .deal-title { font-size: 34px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }109 /* Bottom handle */110 .handle {111 position: absolute; bottom: 76px; left: 50%;112 transform: translateX(-50%);113 width: 300px; height: 14px; background: #111; border-radius: 10px;114 opacity: 0.7;115 }116 /* Simple SVG helpers */117 .svg { display: inline-block; }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status Bar -->124 <div class="statusbar">125 <div class="status-left">3:23</div>126 <div class="status-right">127 <!-- Location/Cloud icon substitute -->128 <svg class="icon svg" viewBox="0 0 24 24">129 <path d="M6 15h12a4 4 0 0 0 0-8h-.5A5.5 5.5 0 0 0 6.1 9H6a3 3 0 0 0 0 6z" fill="#666"/>130 </svg>131 <!-- WiFi -->132 <svg class="icon svg" viewBox="0 0 24 24">133 <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none"/>134 <path d="M5 12c3-3 11-3 14 0" stroke="#333" stroke-width="2" fill="none"/>135 <path d="M9 16c2-2 4-2 6 0" stroke="#333" stroke-width="2" fill="none"/>136 <circle cx="12" cy="19" r="1.5" fill="#333"/>137 </svg>138 <!-- Battery -->139 <svg class="icon svg" viewBox="0 0 26 24">140 <rect x="2" y="6" width="18" height="12" rx="2" fill="#333"/>141 <rect x="21" y="9" width="3" height="6" rx="1" fill="#333"/>142 </svg>143 <div style="font-size:34px; font-weight:800;">100%</div>144 </div>145 </div>146 147 <!-- Filter Chips -->148 <div class="chip-row">149 <div class="chip">Sort By150 <svg class="chev svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" fill="none"/></svg>151 </div>152 <div class="chip">153 <svg class="icon svg" viewBox="0 0 24 24"><path d="M3 5h18M7 12h10M10 19h4" stroke="#222" stroke-width="2" fill="none"/></svg>154 Filter155 </div>156 <div class="chip">Brand157 <svg class="chev svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" fill="none"/></svg>158 </div>159 <div class="chip">Size160 <svg class="chev svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" fill="none"/></svg>161 </div>162 <div class="chip">Fit163 <svg class="chev svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" fill="none"/></svg>164 </div>165 </div>166 167 <div class="content">168 <div class="product-grid">169 <!-- Card 1 -->170 <div class="product-card">171 <div class="p-header">172 <div class="brand">LEVI'S</div>173 <div class="price-line">174 <div class="discount">40% off</div>175 <div class="old">3,199</div>176 <div class="new">₹1,919</div>177 </div>178 <div class="rating-row">179 <div class="stars">★★★★★</div>180 <div class="count">(246)</div>181 <div class="assured">Plus F‑ASSURED</div>182 </div>183 <div class="delivery">Free delivery by <b>Today</b></div>184 </div>185 <div class="p-image">186 [IMG: Levi's Dark Blue Jeans - Model standing]187 <div class="heart">188 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.4-9-8.3C1 9.8 3.1 7 6.2 7c1.7 0 3.2.9 3.8 2.2C10.6 7.9 12.1 7 13.8 7c3.1 0 5.2 2.8 3.2 5.7C19 16.6 12 21 12 21z" stroke="#888" stroke-width="1.6" fill="none"/></svg>189 </div>190 </div>191 </div>192 193 <!-- Card 2 -->194 <div class="product-card">195 <div class="p-header">196 <div class="brand">LEVI'S</div>197 <div class="price-line">198 <div class="discount">40% off</div>199 <div class="old">3,199</div>200 <div class="new">₹1,919</div>201 </div>202 <div class="tag">Hot Deal</div>203 <div class="rating-row">204 <div class="stars">★★★★★</div>205 <div class="count">(2,309)</div>206 <div class="assured">Plus F‑ASSURED</div>207 </div>208 <div class="delivery">Free delivery by <b>Today</b></div>209 </div>210 <div class="p-image">211 <div class="flip-badge">FLIPKART'S CHOICE</div>212 [IMG: Levi's Mid Blue Jeans - Model standing]213 <div class="heart">214 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.4-9-8.3C1 9.8 3.1 7 6.2 7c1.7 0 3.2.9 3.8 2.2C10.6 7.9 12.1 7 13.8 7c3.1 0 5.2 2.8 3.2 5.7C19 16.6 12 21 12 21z" stroke="#888" stroke-width="1.6" fill="none"/></svg>215 </div>216 </div>217 </div>218 219 <!-- Card 3 -->220 <div class="product-card">221 <div class="p-image">222 [IMG: Levi's Dark Blue Folded Hem Jeans]223 <div class="heart">224 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.4-9-8.3C1 9.8 3.1 7 6.2 7c1.7 0 3.2.9 3.8 2.2C10.6 7.9 12.1 7 13.8 7c3.1 0 5.2 2.8 3.2 5.7C19 16.6 12 21 12 21z" stroke="#888" stroke-width="1.6" fill="none"/></svg>225 </div>226 </div>227 <div class="p-footer">228 <div class="brand">LEVI'S</div>229 <div class="price-line">230 <div class="discount">45% off</div>231 <div class="old">2,899</div>232 <div class="new">₹1,594</div>233 </div>234 <div class="tag">Hot Deal</div>235 <div class="rating-row">236 <div class="stars">★★★★★</div>237 <div class="count">(661)</div>238 <div class="assured">Plus F‑ASSURED</div>239 </div>240 <div class="delivery">Free delivery by <b>Today</b></div>241 </div>242 </div>243 244 <!-- Card 4 -->245 <div class="product-card">246 <div class="p-image">247 [IMG: Levi's Blue Jeans - Model with white shoes]248 <div class="heart">249 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.4-9-8.3C1 9.8 3.1 7 6.2 7c1.7 0 3.2.9 3.8 2.2C10.6 7.9 12.1 7 13.8 7c3.1 0 5.2 2.8 3.2 5.7C19 16.6 12 21 12 21z" stroke="#888" stroke-width="1.6" fill="none"/></svg>250 </div>251 </div>252 <div class="p-footer">253 <div class="brand">LEVI'S</div>254 <div class="price-line">255 <div class="discount">40% off</div>256 <div class="old">3,199</div>257 <div class="new">₹1,919</div>258 </div>259 <div class="tag">Daily Saver</div>260 <div class="rating-row">261 <div class="stars">★★★★★</div>262 <div class="count">(692)</div>263 <div class="assured">Plus F‑ASSURED</div>264 </div>265 <div class="delivery">Free delivery by <b>Today</b></div>266 </div>267 </div>268 </div>269 </div>270 271 <!-- Limited Time Deals Purple Section -->272 <div class="deals">273 <div class="deals-top">274 <div>275 <div class="deals-title">Limited Time Deals</div>276 <div class="deals-sub">Offer ends soon</div>277 </div>278 <div class="deals-arrow">279 <svg class="svg" viewBox="0 0 24 24" width="44" height="44">280 <path d="M8 5l8 7-8 7" stroke="#5b32e1" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>281 </svg>282 </div>283 </div>284 <div class="deal-cards">285 <div class="deal-card">286 <div class="deal-img">[IMG: Slim Mid Rise Jeans]</div>287 <div class="deal-brand">LEVI'S</div>288 <div class="deal-title">512 Men Slim Mid Ri...</div>289 </div>290 <div class="deal-card">291 <div class="deal-img">[IMG: Slim Mid Rise Jeans Light]</div>292 <div class="deal-brand">LEVI'S</div>293 <div class="deal-title">512 Men Slim Mid Ri...</div>294 </div>295 <div class="deal-card">296 <div class="deal-img">[IMG: 511 Men Slim Mid Rise]</div>297 <div class="deal-brand">LEVI'S</div>298 <div class="deal-title">511 Men Slim Mid Ri...</div>299 </div>300 </div>301 </div>302 303 <div class="handle"></div>304</div>305</body>306</html>