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>Shirts for Men - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 28px; box-shadow: 0 8px 28px rgba(0,0,0,0.08);13 }14 15 /* Status bar (OS area) */16 .status-bar {17 height: 90px; background: #f3f3f3; color: #444;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 28px; font-size: 34px;20 }21 .status-icons { display: flex; gap: 20px; align-items: center; }22 .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; margin: 0 8px; }23 .battery {24 width: 46px; height: 22px; border: 2px solid #444; border-radius: 4px; position: relative; margin-left: 10px;25 }26 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #444; border-radius: 2px; }27 .battery .level { width: 28px; height: 14px; background: #444; position: absolute; left: 4px; top: 4px; border-radius: 2px; }28 29 /* Top app bar */30 .top-bar {31 height: 120px; display: flex; align-items: center;32 padding: 0 24px; border-bottom: 1px solid #e6e6e6; background: #fff;33 }34 .top-left { display: flex; align-items: center; gap: 18px; }35 .title { font-size: 44px; font-weight: 600; color: #333; }36 .top-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; }37 .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }38 .cart-badge {39 position: absolute; right: 30px; top: 160px;40 background: #ff3b30; color: #fff; font-weight: 700; font-size: 26px;41 border-radius: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;42 }43 44 /* Sort/Filter row */45 .controls {46 display: grid; grid-template-columns: 1fr 1fr;47 border-bottom: 1px solid #eaeaea; background: #fff;48 }49 .control-item {50 height: 120px; display: flex; align-items: center; justify-content: center; gap: 18px;51 font-size: 36px; color: #444; position: relative;52 }53 .control-item:first-child { border-right: 1px solid #efefef; }54 55 /* Banner */56 .banner {57 height: 200px; margin: 22px; border-radius: 18px; overflow: hidden;58 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;59 }60 61 /* Product grid */62 .product-grid {63 padding: 12px 22px 0 22px;64 display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px;65 }66 .card {67 background: #fff; border: 1px solid #e6e6e6; border-radius: 18px; overflow: hidden; position: relative;68 }69 .product-img {70 height: 560px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;71 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;72 }73 .ad-badge {74 position: absolute; left: 12px; top: 12px; background: #ffffff; border: 1px solid #dadada;75 color: #888; font-size: 28px; padding: 8px 12px; border-radius: 10px;76 }77 .fav-btn {78 position: absolute; right: 14px; top: 12px; width: 64px; height: 64px;79 background: #fff; border: 1px solid #e0e0e0; border-radius: 50%;80 display: flex; align-items: center; justify-content: center;81 }82 .card-body { padding: 22px; }83 .prod-title { font-size: 34px; color: #444; line-height: 1.2; margin-bottom: 12px; }84 .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }85 .original { color: #9b9b9b; text-decoration: line-through; font-size: 30px; }86 .price { font-weight: 700; font-size: 34px; color: #222; }87 .discount { color: #1b8f3a; font-size: 32px; font-weight: 700; }88 .delivery-chip {89 display: inline-flex; align-items: center; gap: 10px;90 padding: 10px 12px; border-radius: 10px; background: #f5f8ff; color: #2f66d5; font-weight: 600; font-size: 30px;91 }92 93 /* Coupon pill */94 .coupon {95 margin: 18px 0 6px 0; display: flex; align-items: center;96 background: #e9fbe9; border: 1px dashed #b9e5b9; border-radius: 14px; padding: 16px 18px; gap: 16px; width: calc(100% - 2px); font-size: 30px;97 }98 .coupon .amount { font-weight: 800; color: #2e7d32; }99 .coupon .divider {100 width: 1px; height: 26px; background: linear-gradient(#b9e5b9,#b9e5b9) no-repeat;101 border-left: 4px dotted #9fd99f; margin: 0 4px;102 }103 104 /* Bottom navigation */105 .bottom-nav {106 position: absolute; left: 0; right: 0; bottom: 40px;107 height: 160px; background: #fafafa; border-top: 1px solid #e6e6e6;108 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 18px;109 }110 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #666; font-size: 28px; }111 .nav-item.active { color: #2563eb; font-weight: 700; }112 .cart-dot {113 position: absolute; top: 22px; right: 110px; width: 26px; height: 26px; background: #ff3b30; color: #fff; border-radius: 50%;114 display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;115 }116 .categories-dot {117 position: absolute; width: 20px; height: 20px; background: #ff3b30; border-radius: 50%; top: 34px; left: 660px;118 border: 2px solid #fff;119 }120 .home-indicator {121 position: absolute; left: 50%; transform: translateX(-50%);122 bottom: 12px; width: 360px; height: 12px; background: #000; border-radius: 6px;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status Bar -->130 <div class="status-bar">131 <div>11:27</div>132 <div class="status-icons">133 <span>Temu</span><span class="dot"></span>134 <svg width="32" height="32" viewBox="0 0 24 24">135 <circle cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none"></circle>136 <circle cx="12" cy="12" r="4" fill="#444"></circle>137 </svg>138 <svg width="32" height="32" viewBox="0 0 24 24">139 <path d="M5 3h14l-2 14H7L5 3zm4 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#444"></path>140 </svg>141 <div class="battery"><div class="level"></div></div>142 </div>143 </div>144 145 <!-- Top App Bar -->146 <div class="top-bar">147 <div class="top-left">148 <div class="icon-btn">149 <svg width="48" height="48" viewBox="0 0 24 24">150 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>151 </svg>152 </div>153 <div class="title">shirts for men</div>154 </div>155 <div class="top-actions">156 <div class="icon-btn">157 <svg width="44" height="44" viewBox="0 0 24 24">158 <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle>159 <line x1="20" y1="20" x2="16" y2="16" stroke="#333" stroke-width="2"></line>160 </svg>161 </div>162 <div class="icon-btn">163 <svg width="44" height="44" viewBox="0 0 24 24">164 <rect x="10" y="6" width="4" height="8" rx="2" fill="#333"></rect>165 <path d="M8 14h8v3a4 4 0 0 1-8 0v-3z" fill="#333"></path>166 </svg>167 </div>168 <div class="icon-btn">169 <svg width="44" height="44" viewBox="0 0 24 24">170 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#333" stroke-width="2" fill="none"></path>171 </svg>172 </div>173 <div class="icon-btn">174 <svg width="48" height="48" viewBox="0 0 24 24">175 <path d="M7 6h14l-2 10H7L5 4H2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>176 <circle cx="9" cy="20" r="1.8" fill="#333"></circle>177 <circle cx="18" cy="20" r="1.8" fill="#333"></circle>178 </svg>179 </div>180 </div>181 <div class="cart-badge">1</div>182 </div>183 184 <!-- Sort / Filter -->185 <div class="controls">186 <div class="control-item">187 <svg width="42" height="42" viewBox="0 0 24 24">188 <path d="M4 7h10M4 12h7M4 17h4" stroke="#444" stroke-width="2" stroke-linecap="round"></path>189 </svg>190 <span>Sort</span>191 </div>192 <div class="control-item">193 <svg width="42" height="42" viewBox="0 0 24 24">194 <path d="M3 5h18l-7 8v6l-4-2v-4z" stroke="#444" stroke-width="2" fill="none" stroke-linejoin="round"></path>195 </svg>196 <span>Filter</span>197 </div>198 </div>199 200 <!-- Banner -->201 <div class="banner">[IMG: Promotional banner - Best Value Badge]</div>202 203 <!-- Product Grid -->204 <div class="product-grid">205 <!-- Card 1 -->206 <div class="card">207 <div class="ad-badge">Ad</div>208 <div class="fav-btn">209 <svg width="32" height="32" viewBox="0 0 24 24">210 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#888" stroke-width="2" fill="none"></path>211 </svg>212 </div>213 <div class="product-img">[IMG: Model wearing solid grey shirt]</div>214 <div class="card-body">215 <div class="prod-title">Men Solid Casual Grey Shirt</div>216 <div class="price-row">217 <div class="original">2,199</div>218 <div class="price">₹379</div>219 <div class="discount">82% off</div>220 </div>221 <div class="delivery-chip">222 <svg width="32" height="24" viewBox="0 0 24 24">223 <rect x="2" y="8" width="12" height="8" fill="#2f66d5"></rect>224 <rect x="14" y="10" width="6" height="6" fill="#2f66d5"></rect>225 <circle cx="6" cy="18" r="2" fill="#2f66d5"></circle>226 <circle cx="18" cy="18" r="2" fill="#2f66d5"></circle>227 </svg>228 <span>Free Delivery</span>229 </div>230 <div class="coupon">231 <span class="amount">₹35</span>232 <span class="divider"></span>233 <span>Coupon available</span>234 </div>235 </div>236 </div>237 238 <!-- Card 2 -->239 <div class="card">240 <div class="ad-badge">Ad</div>241 <div class="fav-btn">242 <svg width="32" height="32" viewBox="0 0 24 24">243 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#888" stroke-width="2" fill="none"></path>244 </svg>245 </div>246 <div class="product-img">[IMG: Model wearing solid red shirt]</div>247 <div class="card-body">248 <div class="prod-title">Men Solid Casual Red Shirt</div>249 <div class="price-row">250 <div class="original">2,199</div>251 <div class="price">₹379</div>252 <div class="discount">82% off</div>253 </div>254 <div class="delivery-chip">255 <svg width="32" height="24" viewBox="0 0 24 24">256 <rect x="2" y="8" width="12" height="8" fill="#2f66d5"></rect>257 <rect x="14" y="10" width="6" height="6" fill="#2f66d5"></rect>258 <circle cx="6" cy="18" r="2" fill="#2f66d5"></circle>259 <circle cx="18" cy="18" r="2" fill="#2f66d5"></circle>260 </svg>261 <span>Free Delivery</span>262 </div>263 <div class="coupon">264 <span class="amount">₹35</span>265 <span class="divider"></span>266 <span>Coupon available</span>267 </div>268 </div>269 </div>270 271 <!-- Card 3 -->272 <div class="card">273 <div class="fav-btn">274 <svg width="32" height="32" viewBox="0 0 24 24">275 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#888" stroke-width="2" fill="none"></path>276 </svg>277 </div>278 <div class="product-img">[IMG: Model wearing solid pink shirt]</div>279 <div class="card-body">280 <div class="prod-title">Men Solid Casual Pink Shirt</div>281 <div class="price-row">282 <div class="original">2,199</div>283 <div class="price">₹379</div>284 <div class="discount">82% off</div>285 </div>286 <div class="delivery-chip">287 <svg width="32" height="24" viewBox="0 0 24 24">288 <rect x="2" y="8" width="12" height="8" fill="#2f66d5"></rect>289 <rect x="14" y="10" width="6" height="6" fill="#2f66d5"></rect>290 <circle cx="6" cy="18" r="2" fill="#2f66d5"></circle>291 <circle cx="18" cy="18" r="2" fill="#2f66d5"></circle>292 </svg>293 <span>Free Delivery</span>294 </div>295 </div>296 </div>297 298 <!-- Card 4 -->299 <div class="card">300 <div class="fav-btn">301 <svg width="32" height="32" viewBox="0 0 24 24">302 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#888" stroke-width="2" fill="none"></path>303 </svg>304 </div>305 <div class="product-img">[IMG: Solid black shirt product photo]</div>306 <div class="card-body">307 <div class="prod-title">Men Solid Casual Black Shirt</div>308 <div class="price-row">309 <div class="original">2,199</div>310 <div class="price">₹379</div>311 <div class="discount">82% off</div>312 </div>313 <div class="delivery-chip">314 <svg width="32" height="24" viewBox="0 0 24 24">315 <rect x="2" y="8" width="12" height="8" fill="#2f66d5"></rect>316 <rect x="14" y="10" width="6" height="6" fill="#2f66d5"></rect>317 <circle cx="6" cy="18" r="2" fill="#2f66d5"></circle>318 <circle cx="18" cy="18" r="2" fill="#2f66d5"></circle>319 </svg>320 <span>Free Delivery</span>321 </div>322 </div>323 </div>324 </div>325 326 <!-- Bottom Navigation -->327 <div class="bottom-nav">328 <div class="nav-item">329 <svg width="40" height="40" viewBox="0 0 24 24">330 <path d="M3 11l9-8 9 8v9H3v-9z" stroke="#666" stroke-width="2" fill="none"></path>331 </svg>332 <div>Home</div>333 </div>334 <div class="nav-item active">335 <svg width="40" height="40" viewBox="0 0 24 24">336 <circle cx="11" cy="11" r="7" stroke="#2563eb" stroke-width="2" fill="none"></circle>337 <line x1="20" y1="20" x2="16" y2="16" stroke="#2563eb" stroke-width="2"></line>338 </svg>339 <div>Search</div>340 </div>341 <div class="nav-item">342 <svg width="40" height="40" viewBox="0 0 24 24">343 <rect x="4" y="4" width="6" height="6" fill="#666"></rect>344 <rect x="14" y="4" width="6" height="6" fill="#666"></rect>345 <rect x="4" y="14" width="6" height="6" fill="#666"></rect>346 <rect x="14" y="14" width="6" height="6" fill="#666"></rect>347 </svg>348 <div>Categories</div>349 </div>350 <div class="nav-item">351 <svg width="40" height="40" viewBox="0 0 24 24">352 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2" fill="none"></circle>353 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#666" stroke-width="2" fill="none"></path>354 </svg>355 <div>Account</div>356 </div>357 <div class="nav-item">358 <svg width="40" height="40" viewBox="0 0 24 24">359 <path d="M7 6h14l-2 10H7L5 4H2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>360 <circle cx="9" cy="20" r="1.8" fill="#666"></circle>361 <circle cx="18" cy="20" r="1.8" fill="#666"></circle>362 </svg>363 <div>Cart</div>364 </div>365 <div class="cart-dot">1</div>366 <div class="categories-dot"></div>367 </div>368 369 <div class="home-indicator"></div>370</div>371</body>372</html>