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>Product Grid - Shirts for men</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #111;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 16 /* Status bar (mock) */17 .statusbar {18 height: 110px; background: #cfcfcf; color: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 36px; font-size: 34px; letter-spacing: 0.5px;21 }22 .status-icons { display: flex; align-items: center; gap: 26px; opacity: 0.9; }23 24 /* Top navigation */25 .topbar {26 height: 150px; display: flex; align-items: center; justify-content: space-between;27 padding: 0 40px; border-bottom: 1px solid #eee;28 }29 .top-left, .top-right { display: flex; align-items: center; gap: 28px; }30 .title {31 font-weight: 800; font-size: 54px; letter-spacing: 0.2px;32 }33 34 /* Filters row */35 .filters {36 display: flex; align-items: center; justify-content: space-between;37 padding: 30px 40px; border-bottom: 1px solid #eee;38 text-transform: uppercase; font-weight: 800; color: #222;39 }40 .filters .left, .filters .right { display: flex; align-items: center; gap: 16px; }41 .filters .caret { font-size: 30px; transform: translateY(-2px); opacity: 0.7; }42 43 /* Tabs and items count */44 .tabs-row {45 display: flex; align-items: center; justify-content: space-between;46 padding: 26px 40px;47 }48 .tabs { display: flex; align-items: center; gap: 28px; }49 .tab {50 font-size: 34px; color: #666; padding-bottom: 8px; position: relative; cursor: default;51 }52 .tab.active { color: #111; font-weight: 600; }53 .tab.active::after {54 content: ""; position: absolute; left: 0; bottom: -6px; height: 4px; width: 80%;55 background: #d32f2f; border-radius: 2px;56 }57 .items-right { display: flex; align-items: center; gap: 22px; color: #444; font-size: 32px; }58 59 /* Grid */60 .grid {61 display: grid; grid-template-columns: 1fr 1fr;62 gap: 44px; padding: 22px 40px 140px 40px;63 }64 .card { }65 .img {66 width: 100%; height: 720px; background: #E0E0E0;67 border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;68 color: #757575; font-size: 34px; position: relative;69 }70 .fav {71 position: absolute; right: 26px; bottom: 26px; width: 70px; height: 70px;72 background: #fff; border: 2px solid #e0e0e0; border-radius: 50%; display: flex;73 align-items: center; justify-content: center;74 box-shadow: 0 2px 6px rgba(0,0,0,0.07);75 }76 .card h3 {77 margin: 26px 0 8px; font-size: 38px; font-weight: 600; color: #222;78 }79 .price { font-size: 36px; font-weight: 700; margin-bottom: 16px; }80 .colors { display: flex; align-items: center; gap: 16px; }81 .dot {82 width: 22px; height: 22px; border-radius: 50%; border: 2px solid #bbb;83 }84 .dot.dark { background: #111; border-color: #111; }85 .dot.mid { background: #666; }86 .dot.light { background: #ddd; }87 .more { font-size: 30px; color: #666; }88 89 /* Home indicator (iOS style) */90 .home-indicator {91 position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);92 width: 440px; height: 12px; background: #000; border-radius: 10px; opacity: 0.85;93 }94 95 /* SVG helpers */96 .icon { width: 54px; height: 54px; stroke: #111; fill: none; stroke-width: 3.5; }97 .icon-thin { stroke-width: 3; }98 .icon-red { stroke: #d32f2f; }99 .menu-wrap { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }100 .menu-dot {101 position: absolute; right: -2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d32f2f;102 border: 3px solid #fff;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Mock status bar -->110 <div class="statusbar">111 <div>10:46</div>112 <div class="status-icons">113 <span style="font-weight:800;">S</span>114 <span style="font-weight:800;">G</span>115 <span>76°</span>116 <svg class="icon" viewBox="0 0 24 24" style="stroke:#fff; width:38px; height:38px;">117 <path d="M3 8h18M3 12h18M3 16h18" />118 </svg>119 <svg class="icon" viewBox="0 0 24 24" style="stroke:#fff; width:32px; height:32px;">120 <path d="M3 18h18M3 6h18M3 12h18" />121 </svg>122 </div>123 </div>124 125 <!-- Top bar -->126 <div class="topbar">127 <div class="top-left">128 <div class="menu-wrap">129 <svg class="icon" viewBox="0 0 24 24">130 <path d="M3 6h18M3 12h14M3 18h10" />131 </svg>132 <span class="menu-dot"></span>133 </div>134 <div class="title">shirts for men</div>135 </div>136 <div class="top-right">137 <!-- Search -->138 <svg class="icon" viewBox="0 0 24 24">139 <circle cx="10" cy="10" r="6.5"></circle>140 <path d="M15.5 15.5L21 21"></path>141 </svg>142 <!-- User -->143 <svg class="icon" viewBox="0 0 24 24">144 <circle cx="12" cy="8" r="4.2"></circle>145 <path d="M4 21c2.2-3.6 6-5 8-5s5.8 1.4 8 5"></path>146 </svg>147 <!-- Heart -->148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M12 20s-7-4.6-9.2-8.2C1.7 9.7 3 6.5 6 6.5c2 0 3 1.2 3.9 2.3.9-1.1 1.9-2.3 3.9-2.3 3 0 4.3 3.2 3.2 5.3C19 15.4 12 20 12 20z"></path>150 </svg>151 <!-- Bag -->152 <svg class="icon" viewBox="0 0 24 24">153 <path d="M6 8h12l-1 12H7L6 8z"></path>154 <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>155 </svg>156 </div>157 </div>158 159 <!-- Filters row -->160 <div class="filters">161 <div class="left">162 <span>Department</span>163 <span class="caret">▾</span>164 </div>165 <div class="right">166 <span>Filter & Sort</span>167 <svg class="icon icon-thin" viewBox="0 0 24 24">168 <path d="M4 7h16M9 12h11M13 17h7"></path>169 <circle cx="8" cy="7" r="1.5" fill="#111"></circle>170 <circle cx="12" cy="12" r="1.5" fill="#111"></circle>171 <circle cx="16" cy="17" r="1.5" fill="#111"></circle>172 </svg>173 </div>174 </div>175 176 <!-- Tabs and items count -->177 <div class="tabs-row">178 <div class="tabs">179 <div class="tab">Model</div>180 <div class="tab active">Product</div>181 </div>182 <div class="items-right">183 <span>1120 Items</span>184 <!-- list icon -->185 <svg class="icon" viewBox="0 0 24 24">186 <rect x="4" y="5" width="16" height="14" rx="1.5"></rect>187 <path d="M4 10h16"></path>188 </svg>189 <!-- grid icon (active, red) -->190 <svg class="icon icon-red" viewBox="0 0 24 24">191 <rect x="4" y="4" width="7" height="7"></rect>192 <rect x="13" y="4" width="7" height="7"></rect>193 <rect x="4" y="13" width="7" height="7"></rect>194 <rect x="13" y="13" width="7" height="7"></rect>195 </svg>196 </div>197 </div>198 199 <!-- Products grid -->200 <div class="grid">201 <!-- Card 1 -->202 <div class="card">203 <div class="img">[IMG: Black Relaxed Fit Hoodie]204 <div class="fav">205 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#111; fill:none; stroke-width:2.5;">206 <path d="M12 20s-7-4.6-9.2-8.2C1.7 9.7 3 6.5 6 6.5c2 0 3 1.2 3.9 2.3.9-1.1 1.9-2.3 3.9-2.3 3 0 4.3 3.2 3.2 5.3C19 15.4 12 20 12 20z"></path>207 </svg>208 </div>209 </div>210 <h3>Relaxed Fit Hoodie</h3>211 <div class="price">$24.99</div>212 <div class="colors">213 <span class="dot dark"></span>214 <span class="dot"></span>215 <span class="dot light"></span>216 <span class="dot mid"></span>217 <span class="more">+19</span>218 </div>219 </div>220 221 <!-- Card 2 -->222 <div class="card">223 <div class="img">[IMG: Light Gray Relaxed Fit Hoodie]224 <div class="fav">225 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#111; fill:none; stroke-width:2.5;">226 <path d="M12 20s-7-4.6-9.2-8.2C1.7 9.7 3 6.5 6 6.5c2 0 3 1.2 3.9 2.3.9-1.1 1.9-2.3 3.9-2.3 3 0 4.3 3.2 3.2 5.3C19 15.4 12 20 12 20z"></path>227 </svg>228 </div>229 </div>230 <h3>Relaxed Fit Hoodie</h3>231 <div class="price">$24.99</div>232 <div class="colors">233 <span class="dot"></span>234 <span class="dot dark"></span>235 <span class="dot"></span>236 <span class="dot mid"></span>237 <span class="more">+19</span>238 </div>239 </div>240 241 <!-- Card 3 -->242 <div class="card">243 <div class="img">[IMG: Pack of White & Black Tees]244 <div class="fav">245 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#111; fill:none; stroke-width:2.5;">246 <path d="M12 20s-7-4.6-9.2-8.2C1.7 9.7 3 6.5 6 6.5c2 0 3 1.2 3.9 2.3.9-1.1 1.9-2.3 3.9-2.3 3 0 4.3 3.2 3.2 5.3C19 15.4 12 20 12 20z"></path>247 </svg>248 </div>249 </div>250 <h3>3-pack Relaxed Tees</h3>251 <div class="price">$19.99</div>252 <div class="colors">253 <span class="dot light"></span>254 <span class="dot dark"></span>255 <span class="dot light"></span>256 <span class="more">+5</span>257 </div>258 </div>259 260 <!-- Card 4 -->261 <div class="card">262 <div class="img">[IMG: Long Black Open Hoodie]263 <div class="fav">264 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#111; fill:none; stroke-width:2.5;">265 <path d="M12 20s-7-4.6-9.2-8.2C1.7 9.7 3 6.5 6 6.5c2 0 3 1.2 3.9 2.3.9-1.1 1.9-2.3 3.9-2.3 3 0 4.3 3.2 3.2 5.3C19 15.4 12 20 12 20z"></path>266 </svg>267 </div>268 </div>269 <h3>Longline Zip Hoodie</h3>270 <div class="price">$29.99</div>271 <div class="colors">272 <span class="dot dark"></span>273 <span class="dot mid"></span>274 <span class="dot light"></span>275 <span class="more">+7</span>276 </div>277 </div>278 </div>279 280 <div class="home-indicator"></div>281</div>282</body>283</html>