GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Van Heusen - UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 box-sizing: border-box;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16 color: #212121;17 }18 19 /* Top status bar */20 .statusbar {21 height: 80px;22 padding: 0 28px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 32px;27 color: #333;28 }29 .status-icons { display: flex; align-items: center; gap: 22px; }30 .status-icons .icon {31 width: 28px; height: 28px; border-radius: 4px; background: #e0e0e0;32 }33 34 /* App bar */35 .appbar {36 height: 120px;37 padding: 0 28px;38 display: flex; align-items: center;39 }40 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }41 .icon-btn svg { width: 36px; height: 36px; }42 .brand-logo {43 width: 58px; height: 58px;44 border-radius: 12px;45 border: 1px solid #e0e0e0;46 background: #fff3f7;47 margin: 0 12px 0 6px;48 display: flex; align-items: center; justify-content: center;49 font-weight: 800; color: #ff4081; font-size: 30px;50 }51 .app-title { font-size: 44px; font-weight: 800; color: #263238; }52 .app-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }53 .app-right svg { width: 38px; height: 38px; }54 55 /* Info section */56 .info { padding: 0 28px; margin-top: 8px; }57 .info h3 { margin: 0; font-size: 36px; font-weight: 800; color: #263238; }58 .info p { margin: 10px 0 16px; font-size: 30px; color: #666; }59 60 /* Divider */61 .divider { height: 16px; background: #f2f2f2; margin: 16px 0; }62 63 /* Section headers */64 .section { padding: 0 28px; }65 .section .title { margin: 0; font-size: 36px; font-weight: 800; color: #263238; }66 .section .subtitle { margin: 10px 0 22px; font-size: 28px; color: #e64a19; font-weight: 700; }67 .section.sponsored { display: flex; align-items: center; }68 .section.sponsored .star { margin-left: 10px; }69 .section.sponsored .ad-pill {70 margin-left: auto;71 font-size: 24px;72 color: #757575;73 border: 1px solid #cfcfcf;74 border-radius: 16px;75 padding: 6px 12px;76 }77 78 /* Product grid */79 .grid { padding: 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }80 .card {81 background: #fff;82 border: 1px solid #e0e0e0;83 border-radius: 12px;84 box-shadow: 0 2px 4px rgba(0,0,0,0.05);85 overflow: hidden;86 }87 .card .img {88 position: relative;89 width: 100%; height: 420px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 display: flex; align-items: center; justify-content: center;93 color: #757575; font-size: 30px; text-align: center;94 }95 .rating-chip {96 position: absolute; left: 14px; bottom: 14px;97 display: flex; align-items: center; gap: 8px;98 height: 48px; padding: 0 14px;99 background: #fafafa; color: #333;100 border: 1px solid #ddd; border-radius: 24px;101 font-size: 26px; font-weight: 700;102 }103 .card .body { padding: 18px; }104 .card .brand { font-size: 30px; font-weight: 800; color: #424242; margin-bottom: 6px; }105 .price-line { font-size: 28px; margin-bottom: 6px; }106 .price-line .mrp { color: #9e9e9e; text-decoration: line-through; margin-right: 8px; }107 .price-line .offer { color: #e64a19; font-weight: 800; margin-left: 6px; }108 .desc { font-size: 26px; color: #757575; }109 110 /* Bottom nav bar */111 .footer {112 position: absolute; left: 0; right: 0; bottom: 0;113 height: 150px; background: #1c1c1c;114 display: flex; align-items: center; justify-content: center;115 }116 .homebar { width: 200px; height: 12px; background: #e0e0e0; border-radius: 6px; }117 118 /* Utility */119 .rupee { font-family: "Segoe UI Symbol", Arial, sans-serif; }120</style>121</head>122<body>123<div id="render-target">124 <!-- Status bar -->125 <div class="statusbar">126 <div>10:17</div>127 <div class="status-icons">128 <div class="icon" title="Do Not Disturb"></div>129 <div class="icon" title="Wi‑Fi"></div>130 <div class="icon" title="Battery"></div>131 </div>132 </div>133 134 <!-- App bar -->135 <div class="appbar">136 <div class="icon-btn" aria-label="Back">137 <svg viewBox="0 0 24 24">138 <polyline points="14,6 8,12 14,18" fill="none" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline>139 </svg>140 </div>141 <div class="brand-logo">M</div>142 <div class="app-title">Van Heusen</div>143 <div class="app-right">144 <!-- Share -->145 <svg viewBox="0 0 24 24">146 <circle cx="6" cy="12" r="2" fill="#424242"></circle>147 <circle cx="12" cy="7" r="2" fill="#424242"></circle>148 <circle cx="18" cy="12" r="2" fill="#424242"></circle>149 <path d="M8 12 L10 8 L16 12" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round"></path>150 </svg>151 <!-- Heart -->152 <svg viewBox="0 0 24 24">153 <path d="M12 20 C8 17,5 14,5 11 C5 8,7 6,9 6 C10.5 6,12 7.2,12 8.5 C12 7.2,13.5 6,15 6 C17 6,19 8,19 11 C19 14,16 17,12 20 Z"154 fill="none" stroke="#424242" stroke-width="2"></path>155 </svg>156 <!-- Bag -->157 <svg viewBox="0 0 24 24">158 <rect x="6" y="8" width="12" height="12" rx="2" fill="none" stroke="#424242" stroke-width="2"></rect>159 <path d="M9 8 C9 6.5 10 5 12 5 C14 5 15 6.5 15 8" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round"></path>160 </svg>161 </div>162 </div>163 164 <!-- Info -->165 <div class="info">166 <h3>Easy 14 days returns and exchanges</h3>167 <p>Choose to return or exchange for a different size (if available) within 14 days.</p>168 </div>169 170 <div class="divider"></div>171 172 <!-- Fastest selling similar products -->173 <div class="section">174 <h2 class="title">Fastest selling similar products</h2>175 <div class="subtitle">Likely to be sold out soon</div>176 </div>177 178 <div class="grid">179 <!-- Card 1 -->180 <div class="card">181 <div class="img">[IMG: Black slim-fit casual shirt]182 <div class="rating-chip">183 4.1184 <svg viewBox="0 0 24 24" width="22" height="22">185 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>186 </svg>187 </div>188 </div>189 <div class="body">190 <div class="brand">Solly</div>191 <div class="price-line">192 <span class="rupee">₹</span>1,874 <span class="offer">25% OFF</span>193 </div>194 <div class="desc">Slim Fit Casual Shirt</div>195 </div>196 </div>197 198 <!-- Card 2 -->199 <div class="card">200 <div class="img">[IMG: Black formal shirt on mannequin]201 <div class="rating-chip">202 4.5203 <svg viewBox="0 0 24 24" width="22" height="22">204 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>205 </svg>206 </div>207 </div>208 <div class="body">209 <div class="brand">Louis Philippe</div>210 <div class="price-line">211 <span class="rupee">₹</span>2,999212 </div>213 <div class="desc">Men Formal Shirt</div>214 </div>215 </div>216 217 <!-- Card 3 -->218 <div class="card">219 <div class="img">[IMG: Black pure cotton formal shirt]220 <div class="rating-chip">221 4.2222 <svg viewBox="0 0 24 24" width="22" height="22">223 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>224 </svg>225 </div>226 </div>227 <div class="body">228 <div class="brand">Peter England Elite</div>229 <div class="price-line">230 <span class="mrp"><span class="rupee">₹</span>1,799</span>231 <span class="rupee">₹</span>1,529 <span class="offer">15% OFF</span>232 </div>233 <div class="desc">Pure Cotton Formal Shirt</div>234 </div>235 </div>236 </div>237 238 <!-- Sponsored Products -->239 <div class="section sponsored">240 <h2 class="title">Sponsored Products</h2>241 <div class="star">242 <svg viewBox="0 0 24 24" width="26" height="26">243 <path d="M12 2 L14.5 8.2 L21.5 9 L16.3 13 L18 20 L12 16.6 L6 20 L7.7 13 L2.5 9 L9.5 8.2 Z" fill="#607d8b"></path>244 </svg>245 </div>246 <div class="ad-pill">AD</div>247 </div>248 249 <div class="grid">250 <!-- Sponsored Card 1 -->251 <div class="card">252 <div class="img">[IMG: Navy slim-fit formal shirt]253 <div class="rating-chip">254 4.1255 <svg viewBox="0 0 24 24" width="22" height="22">256 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>257 </svg>258 </div>259 </div>260 <div class="body">261 <div class="brand">Van Heusen</div>262 <div class="price-line">263 <span class="mrp"><span class="rupee">₹</span>2,999</span>264 <span class="rupee">₹</span>2,249 <span class="offer">25% OFF</span>265 </div>266 <div class="desc">Slim Fit Formal Shirt</div>267 </div>268 </div>269 270 <!-- Sponsored Card 2 -->271 <div class="card">272 <div class="img">[IMG: Dark teal cotton formal shirt]273 <div class="rating-chip">274 4.5275 <svg viewBox="0 0 24 24" width="22" height="22">276 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>277 </svg>278 </div>279 </div>280 <div class="body">281 <div class="brand">Van Heusen</div>282 <div class="price-line">283 <span class="rupee">₹</span>2,299284 </div>285 <div class="desc">Slim Fit Cotton Formal Shirt</div>286 </div>287 </div>288 289 <!-- Sponsored Card 3 -->290 <div class="card">291 <div class="img">[IMG: Black spread collar formal shirt]292 <div class="rating-chip">293 4.3294 <svg viewBox="0 0 24 24" width="22" height="22">295 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.4 20.5 L12 17 L5.6 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z" fill="#26a69a"></path>296 </svg>297 </div>298 </div>299 <div class="body">300 <div class="brand">Louis Philippe</div>301 <div class="price-line">302 <span class="mrp"><span class="rupee">₹</span>2,599</span>303 <span class="rupee">₹</span>1,999304 </div>305 <div class="desc">Spread Collar Formal Shirt</div>306 </div>307 </div>308 </div>309 310 <!-- Bottom navigation bar -->311 <div class="footer">312 <div class="homebar"></div>313 </div>314</div>315</body>316</html>