GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Man's Shirt Listing</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; font-family: Arial, Helvetica, sans-serif; color: #222;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 120px; background: #7A7A7A; color: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 40px; font-size: 32px;21 }22 .status-icons { display: flex; align-items: center; gap: 28px; }23 24 /* App bar */25 .app-bar {26 position: absolute; top: 120px; left: 0; right: 0; height: 145px;27 background: #fff; border-bottom: 1px solid #E0E0E0;28 display: flex; align-items: center; padding: 0 32px;29 }30 .app-left { width: 120px; display: flex; align-items: center; justify-content: center; }31 .app-title { flex: 1; font-size: 44px; font-weight: 600; }32 .app-actions { width: 300px; display: flex; justify-content: flex-end; gap: 28px; }33 34 /* Content area */35 .content {36 position: absolute; top: 265px; left: 0; right: 0; bottom: 0;37 overflow-y: auto; -webkit-overflow-scrolling: touch;38 padding-bottom: 140px;39 }40 41 /* Filters */42 .filters-header {43 padding: 30px 40px 0 40px;44 display: flex; justify-content: flex-end; align-items: center; gap: 12px;45 }46 .filters-link { color: #6A38F0; font-weight: 700; font-size: 32px; }47 .filters-count {48 display: inline-flex; align-items: center; justify-content: center;49 width: 44px; height: 44px; border-radius: 10px; background: #6A38F0; color: #fff; font-size: 26px; font-weight: 700;50 }51 52 .filters-panel { padding: 10px 40px 20px 40px; }53 .filters-title { font-size: 40px; font-weight: 700; margin-bottom: 26px; }54 55 .chip-row { display: flex; flex-wrap: wrap; gap: 22px; }56 .chip {57 border: 2px solid #333; border-radius: 10px; height: 88px;58 padding: 0 28px; display: inline-flex; align-items: center; font-size: 32px; font-weight: 600; background: #fff;59 }60 .chip .mini-badge {61 margin-left: 16px; background: #111; color: #fff; font-size: 26px; font-weight: 700;62 width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;63 }64 65 .items-count { margin-top: 26px; font-size: 30px; color: #555; display: flex; align-items: center; gap: 14px; }66 67 /* Grid */68 .product-grid {69 padding: 30px 40px 40px 40px;70 display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;71 }72 .card { width: 100%; }73 .card-img {74 position: relative; width: 100%; height: 640px;75 background: #E0E0E0; border: 1px solid #BDBDBD;76 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;77 }78 .fav-overlay {79 position: absolute; top: 20px; right: 20px;80 width: 100px; height: 100px; background: #fff; border-radius: 6px;81 display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);82 }83 84 .meta { margin-top: 16px; font-size: 26px; color: #757575; display: flex; align-items: center; gap: 10px; }85 .brand { margin-top: 8px; font-size: 34px; font-weight: 700; }86 .title { margin-top: 6px; font-size: 30px; color: #555; }87 .price { margin-top: 12px; font-size: 36px; font-weight: 700; }88 .price.sale { color: #E53935; }89 .original { margin-top: 6px; font-size: 28px; color: #777; }90 .original del { color: #777; }91 .discount { color: #E53935; margin-left: 8px; }92 93 .deal-chip {94 display: inline-block; background: #D84315; color: #fff;95 font-size: 28px; font-weight: 700; padding: 8px 14px; border-radius: 6px; margin-top: 10px;96 }97 98 .plus-pill {99 display: inline-flex; align-items: center; gap: 10px;100 margin-top: 12px; font-size: 28px; color: #333;101 }102 .plus-pill .tag {103 border: 2px solid #111; border-radius: 20px; padding: 4px 12px; font-weight: 800; letter-spacing: 1px;104 }105 106 /* Bottom home indicator */107 .home-indicator {108 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);109 width: 300px; height: 14px; border-radius: 10px; background: #000; opacity: 0.85;110 }111 112 /* Simple icon styles */113 svg { display: block; }114 .icon { width: 48px; height: 48px; }115 .icon-lg { width: 54px; height: 54px; }116 .icon-heart { stroke: #222; fill: none; stroke-width: 3; }117 .icon-bag { stroke: #222; fill: none; stroke-width: 3; }118 .icon-search { stroke: #222; fill: none; stroke-width: 3; }119 .icon-back { stroke: #222; fill: none; stroke-width: 4; }120 .icon-info { stroke: #777; fill: none; stroke-width: 3; }121 .icon-info .dot { fill: #777; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status Bar -->128 <div class="status-bar">129 <div>11:39</div>130 <div class="status-icons">131 <!-- Wi-Fi -->132 <svg class="icon" viewBox="0 0 24 24">133 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" fill="none" stroke-width="2"/>134 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" fill="none" stroke-width="2"/>135 <path d="M9 15c3-2 6-2 9 0" stroke="#fff" fill="none" stroke-width="2"/>136 <circle cx="12" cy="18" r="1.6" fill="#fff"/>137 </svg>138 <!-- Battery -->139 <svg class="icon" viewBox="0 0 28 18">140 <rect x="1.5" y="2.5" width="22" height="13" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>141 <rect x="4" y="5" width="16" height="8" fill="#fff"/>142 <rect x="24.5" y="6" width="2.5" height="6" fill="#fff"/>143 </svg>144 </div>145 </div>146 147 <!-- App Bar -->148 <div class="app-bar">149 <div class="app-left">150 <svg class="icon-lg icon-back" viewBox="0 0 24 24">151 <path d="M15 5l-7 7 7 7" />152 </svg>153 </div>154 <div class="app-title">man's shirt</div>155 <div class="app-actions">156 <svg class="icon-lg icon-search" viewBox="0 0 24 24">157 <circle cx="11" cy="11" r="7"/>158 <path d="M20 20l-4.5-4.5"/>159 </svg>160 <svg class="icon-lg icon-heart" viewBox="0 0 24 24">161 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0112 7a4.5 4.5 0 017 3.5c0 5-7 9.5-7 9.5z"/>162 </svg>163 <svg class="icon-lg icon-bag" viewBox="0 0 24 24">164 <path d="M6 8h12l-1 12H7L6 8z"/>165 <path d="M9 8V6a3 3 0 016 0v2"/>166 </svg>167 </div>168 </div>169 170 <!-- Content -->171 <div class="content">172 <div class="filters-header">173 <div class="filters-link">Filters</div>174 <div class="filters-count">1</div>175 </div>176 177 <div class="filters-panel">178 <div class="filters-title">Top filters</div>179 <div class="chip-row">180 <div class="chip">Colour <span class="mini-badge">1</span></div>181 <div class="chip">Size</div>182 <div class="chip">Brand</div>183 <div class="chip">Sustainability</div>184 <div class="chip">Price</div>185 </div>186 187 <div class="items-count">188 <span>Showing 5.650 items</span>189 <svg class="icon" viewBox="0 0 24 24">190 <circle cx="12" cy="12" r="9" class="icon-info"/>191 <rect x="11.2" y="10" width="1.6" height="6" class="icon-info dot"/>192 <circle cx="12" cy="7.4" r="1.4" class="icon-info dot"/>193 </svg>194 </div>195 </div>196 197 <!-- Product Grid -->198 <div class="product-grid">199 200 <!-- Card 1 -->201 <div class="card">202 <div class="card-img">203 [IMG: Black long-sleeve polo shirt on model]204 <div class="fav-overlay">205 <svg class="icon-lg icon-heart" viewBox="0 0 24 24">206 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0112 7a4.5 4.5 0 017 3.5c0 5-7 9.5-7 9.5z"/>207 </svg>208 </div>209 </div>210 <div class="meta">211 <span>Sponsored</span>212 <svg class="icon" viewBox="0 0 24 24">213 <circle cx="12" cy="12" r="9" class="icon-info"/>214 <rect x="11.2" y="10" width="1.6" height="6" class="icon-info dot"/>215 <circle cx="12" cy="7.4" r="1.4" class="icon-info dot"/>216 </svg>217 </div>218 <div class="brand">Superdry</div>219 <div class="title">STUDIOS - Polo shirt - bl...</div>220 <div class="price">59,99 €</div>221 </div>222 223 <!-- Card 2 -->224 <div class="card">225 <div class="card-img">226 [IMG: Grey polo shirt on model]227 <div class="fav-overlay">228 <svg class="icon-lg icon-heart" viewBox="0 0 24 24">229 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0112 7a4.5 4.5 0 017 3.5c0 5-7 9.5-7 9.5z"/>230 </svg>231 </div>232 </div>233 <div class="meta">234 <span>Sponsored</span>235 <svg class="icon" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="9" class="icon-info"/>237 <rect x="11.2" y="10" width="1.6" height="6" class="icon-info dot"/>238 <circle cx="12" cy="7.4" r="1.4" class="icon-info dot"/>239 </svg>240 </div>241 <div class="brand">Jacey Quinn</div>242 <div class="title">GARMENT DYE SHORT ...</div>243 <div class="deal-chip">Deal</div>244 <div class="price sale">34,99 €</div>245 <div class="original">Originally: <del>49,95 €</del> <span class="discount">-30%</span></div>246 <div class="plus-pill"><span class="tag">PLUS</span> <span>Premium Delivery</span></div>247 </div>248 249 <!-- Card 3 -->250 <div class="card">251 <div class="card-img">252 [IMG: Black long-sleeve tee on model]253 <div class="fav-overlay">254 <svg class="icon-lg icon-heart" viewBox="0 0 24 24">255 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0112 7a4.5 4.5 0 017 3.5c0 5-7 9.5-7 9.5z"/>256 </svg>257 </div>258 </div>259 </div>260 261 <!-- Card 4 -->262 <div class="card">263 <div class="card-img">264 [IMG: Black button-up shirt on model]265 <div class="fav-overlay">266 <svg class="icon-lg icon-heart" viewBox="0 0 24 24">267 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0112 7a4.5 4.5 0 017 3.5c0 5-7 9.5-7 9.5z"/>268 </svg>269 </div>270 </div>271 </div>272 273 </div>274 </div>275 276 <!-- Home indicator -->277 <div class="home-indicator"></div>278 279</div>280</body>281</html>