GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>H&M shoes - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #e6e6e6;20 display: flex;21 align-items: center;22 padding: 0 36px;23 box-sizing: border-box;24 font-size: 32px;25 color: #555;26 }27 .status-bar .right {28 margin-left: auto;29 display: flex;30 align-items: center;31 gap: 26px;32 }33 .icon {34 width: 56px;35 height: 56px;36 }37 38 /* App header */39 .app-header {40 height: 140px;41 display: flex;42 align-items: center;43 padding: 0 36px;44 box-sizing: border-box;45 border-bottom: 1px solid #eee;46 }47 .title {48 font-weight: 700;49 font-size: 48px;50 margin-left: 24px;51 }52 .app-header .actions {53 margin-left: auto;54 display: flex;55 align-items: center;56 gap: 36px;57 }58 59 /* Row: department & filter */60 .filter-row {61 display: flex;62 align-items: center;63 padding: 22px 36px;64 box-sizing: border-box;65 border-bottom: 1px solid #eee;66 font-size: 36px;67 color: #333;68 }69 .filter-row .dept {70 display: flex;71 align-items: center;72 gap: 16px;73 font-weight: 600;74 }75 .filter-row .right {76 margin-left: auto;77 display: flex;78 align-items: center;79 gap: 18px;80 font-weight: 700;81 }82 83 /* tabs and items count row */84 .tabs-row {85 display: flex;86 align-items: center;87 padding: 18px 36px;88 box-sizing: border-box;89 font-size: 34px;90 color: #666;91 border-bottom: 1px solid #f1f1f1;92 }93 .tabs {94 display: flex;95 gap: 28px;96 }97 .tab {98 padding: 10px 6px;99 }100 .tab.active {101 color: #c20d1a;102 border-bottom: 3px solid #c20d1a;103 font-weight: 700;104 }105 .items-view {106 margin-left: auto;107 display: flex;108 align-items: center;109 gap: 16px;110 color: #666;111 }112 .items-view .count { margin-right: 10px; }113 114 /* Product grid */115 .grid {116 padding: 30px 24px 24px;117 box-sizing: border-box;118 display: flex;119 flex-wrap: wrap;120 gap: 28px;121 }122 .card {123 width: 504px; /* two columns with gap */124 background: #fff;125 }126 .image {127 width: 100%;128 height: 630px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex;132 justify-content: center;133 align-items: center;134 color: #757575;135 font-size: 34px;136 position: relative;137 }138 .fav {139 position: absolute;140 right: 22px;141 bottom: 22px;142 width: 64px;143 height: 64px;144 border-radius: 32px;145 background: #fff;146 border: 1px solid #ddd;147 display: flex;148 justify-content: center;149 align-items: center;150 }151 .card .name {152 font-size: 36px;153 font-weight: 700;154 margin-top: 18px;155 padding: 0 10px;156 }157 .card .price {158 font-size: 36px;159 margin-top: 10px;160 padding: 0 10px;161 }162 .colors {163 display: flex;164 gap: 16px;165 padding: 12px 10px 0;166 }167 .dot {168 width: 26px;169 height: 26px;170 border-radius: 50%;171 border: 1px solid #bbb;172 }173 .dot.black { background: #111; }174 .dot.pink { background: #e7c9d8; }175 .dot.gray { background: #bfb7ae; }176 .dot.dkgray { background: #3a3a3a; }177 178 /* Footer spacer to mimic scroll */179 .spacer {180 height: 600px;181 }182 183 /* Simple icons (SVG) */184 svg { display: block; }185 .btn {186 width: 64px; height: 64px;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div>1:44</div>196 <div class="right">197 <div>⌁</div>198 <div>🔔</div>199 <div>100%</div>200 </div>201 </div>202 203 <!-- App header -->204 <div class="app-header">205 <!-- Hamburger -->206 <svg class="icon" viewBox="0 0 24 24">207 <path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2" stroke-linecap="round" fill="none"/>208 </svg>209 <div class="title">H&M shoes</div>210 211 <div class="actions">212 <!-- Search -->213 <svg class="icon" viewBox="0 0 24 24">214 <circle cx="10" cy="10" r="6" stroke="#222" stroke-width="2" fill="none"/>215 <path d="M14.5 14.5L21 21" stroke="#222" stroke-width="2" stroke-linecap="round"/>216 </svg>217 <!-- User -->218 <svg class="icon" viewBox="0 0 24 24">219 <circle cx="12" cy="8" r="4" stroke="#222" stroke-width="2" fill="none"/>220 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>221 </svg>222 <!-- Heart -->223 <svg class="icon" viewBox="0 0 24 24">224 <path d="M12 21s-7-4.5-9-8.5C1 8.5 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5.5 2.5 3 6.5C19 16.5 12 21 12 21z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>225 </svg>226 <!-- Bag -->227 <svg class="icon" viewBox="0 0 24 24">228 <path d="M6 9h12l-1 11H7L6 9z" stroke="#222" stroke-width="2" fill="none"/>229 <path d="M9 9V7a3 3 0 016 0v2" stroke="#222" stroke-width="2" fill="none"/>230 </svg>231 </div>232 </div>233 234 <!-- Department & Filter row -->235 <div class="filter-row">236 <div class="dept">237 <div>DEPARTMENT</div>238 <svg class="btn" viewBox="0 0 24 24">239 <path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="right">243 <div>FILTER & SORT</div>244 <!-- sliders icon -->245 <svg class="btn" viewBox="0 0 24 24">246 <path d="M4 6h10M4 12h16M4 18h12" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>247 <circle cx="16" cy="6" r="2" fill="#222"/>248 <circle cx="10" cy="18" r="2" fill="#222"/>249 <circle cx="12" cy="12" r="2" fill="#222"/>250 </svg>251 </div>252 </div>253 254 <!-- Tabs and items view -->255 <div class="tabs-row">256 <div class="tabs">257 <div class="tab">Model</div>258 <div class="tab active">Product</div>259 </div>260 <div class="items-view">261 <div class="count">653 Items</div>262 <!-- list icon -->263 <svg class="btn" viewBox="0 0 24 24">264 <rect x="4" y="5" width="16" height="3" stroke="#222" stroke-width="2" fill="none"/>265 <rect x="4" y="10.5" width="16" height="3" stroke="#222" stroke-width="2" fill="none"/>266 <rect x="4" y="16" width="16" height="3" stroke="#222" stroke-width="2" fill="none"/>267 </svg>268 <!-- grid icon -->269 <svg class="btn" viewBox="0 0 24 24">270 <rect x="3" y="3" width="8" height="8" stroke="#222" stroke-width="2" fill="none"/>271 <rect x="13" y="3" width="8" height="8" stroke="#222" stroke-width="2" fill="none"/>272 <rect x="3" y="13" width="8" height="8" stroke="#222" stroke-width="2" fill="none"/>273 <rect x="13" y="13" width="8" height="8" stroke="#222" stroke-width="2" fill="none"/>274 </svg>275 </div>276 </div>277 278 <!-- Product grid -->279 <div class="grid">280 281 <!-- Card 1 -->282 <div class="card">283 <div class="image">284 [IMG: Glittery Ballet Flats - pair]285 <div class="fav">286 <svg viewBox="0 0 24 24" class="icon">287 <path d="M12 21s-7-4.5-9-8.5C1 8.5 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5.5 2.5 3 6.5C19 16.5 12 21 12 21z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>288 </svg>289 </div>290 </div>291 <div class="name">Glittery Ballet Flats</div>292 <div class="price">$24.99</div>293 <div class="colors">294 <div class="dot black"></div>295 <div class="dot pink"></div>296 </div>297 </div>298 299 <!-- Card 2 -->300 <div class="card">301 <div class="image">302 [IMG: Warm-lined Boots with Laces]303 <div class="fav">304 <svg viewBox="0 0 24 24" class="icon">305 <path d="M12 21s-7-4.5-9-8.5C1 8.5 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5.5 2.5 3 6.5C19 16.5 12 21 12 21z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>306 </svg>307 </div>308 </div>309 <div class="name">Warm-lined Boots with Laces</div>310 <div class="price">$34.99</div>311 <div class="colors">312 <div class="dot dkgray"></div>313 <div class="dot black"></div>314 <div class="dot gray"></div>315 </div>316 </div>317 318 <!-- Card 3 -->319 <div class="card">320 <div class="image" style="height: 760px;">321 [IMG: Tall Leather Boots - left]322 <div class="fav">323 <svg viewBox="0 0 24 24" class="icon">324 <path d="M12 21s-7-4.5-9-8.5C1 8.5 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5.5 2.5 3 6.5C19 16.5 12 21 12 21z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>325 </svg>326 </div>327 </div>328 <div class="name">Leather Riding Boots</div>329 <div class="price">$59.99</div>330 <div class="colors">331 <div class="dot black"></div>332 </div>333 </div>334 335 <!-- Card 4 -->336 <div class="card">337 <div class="image" style="height: 760px;">338 [IMG: Tall Leather Boots - right]339 <div class="fav">340 <svg viewBox="0 0 24 24" class="icon">341 <path d="M12 21s-7-4.5-9-8.5C1 8.5 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5.5 2.5 3 6.5C19 16.5 12 21 12 21z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>342 </svg>343 </div>344 </div>345 <div class="name">Knee High Boots</div>346 <div class="price">$64.99</div>347 <div class="colors">348 <div class="dot black"></div>349 </div>350 </div>351 352 </div>353 354 <div class="spacer"></div>355</div>356</body>357</html>