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>Canvas Trainers - 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; color: #111; font-family: "Helvetica Neue", Arial, sans-serif;13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 140px; background: #D9D9D9; color: #333;18 }19 .status-content {20 position: absolute; top: 40px; left: 40px; right: 40px;21 display: flex; align-items: center; justify-content: space-between;22 font-size: 36px; letter-spacing: 0.5px;23 }24 .status-icons { display: flex; gap: 28px; align-items: center; }25 /* Header */26 .header {27 position: absolute; top: 140px; left: 0; right: 0;28 height: 160px; background: #fff; border-bottom: 1px solid #eee;29 display: flex; align-items: center; padding: 0 40px; gap: 32px;30 }31 .brand { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; }32 .header-icons { margin-left: auto; display: flex; gap: 40px; align-items: center; }33 .icon-btn svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 4; }34 .menu svg { width: 64px; height: 44px; }35 /* Filter rows */36 .filters-row {37 position: absolute; top: 300px; left: 0; right: 0;38 height: 140px; display: flex; align-items: center; justify-content: space-between;39 padding: 0 40px; border-bottom: 1px solid #eee;40 }41 .filters-row .label { font-size: 40px; font-weight: 700; }42 .filters-row .right { display: flex; align-items: center; gap: 20px; }43 .filters-row .label svg { width: 32px; height: 32px; stroke: #111; }44 .sub-row {45 position: absolute; top: 440px; left: 0; right: 0;46 height: 120px; display: flex; align-items: center; justify-content: space-between;47 padding: 0 40px; border-bottom: 1px solid #f0f0f0;48 }49 .tabs { display: flex; gap: 24px; align-items: baseline; font-size: 34px; }50 .tabs .muted { color: #777; }51 .tabs .active { color: #D32F2F; border-bottom: 3px solid #D32F2F; padding-bottom: 6px; }52 .items-count { display: flex; align-items: center; gap: 18px; font-size: 34px; color: #444; }53 .toggle-icons { display: flex; gap: 16px; }54 .toggle-icons svg { width: 42px; height: 42px; stroke-width: 3; }55 /* Product grid */56 .grid {57 position: absolute; top: 560px; left: 0; right: 0; bottom: 140px;58 padding: 40px; display: flex; flex-wrap: wrap; gap: 40px;59 }60 .card {61 width: 480px;62 }63 .img-box {64 width: 100%; height: 720px; background: #E0E0E0;65 border: 1px solid #BDBDBD; border-radius: 8px;66 display: flex; align-items: center; justify-content: center; color: #757575;67 position: relative;68 font-size: 32px;69 text-align: center;70 padding: 20px;71 }72 .img-heart {73 position: absolute; right: 24px; bottom: 24px;74 width: 64px; height: 64px;75 }76 .img-heart svg { width: 100%; height: 100%; stroke: #111; fill: none; stroke-width: 4; }77 .title { margin-top: 24px; font-size: 40px; font-weight: 600; }78 .price { margin-top: 10px; font-size: 40px; font-weight: 700; color: #111; display: flex; gap: 16px; align-items: baseline; }79 .price .sale { color: #D32F2F; }80 .price .old { color: #777; text-decoration: line-through; font-size: 34px; font-weight: 500; }81 .swatches { margin-top: 18px; display: flex; gap: 18px; }82 .dot {83 width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ccc;84 }85 .dot.black { background: #000; }86 .dot.white { background: #fff; }87 .dot.gray { background: #7a7a7a; }88 .dot.off { background: #eaeaea; }89 /* Home indicator */90 .home-indicator {91 position: absolute; left: 50%; transform: translateX(-50%);92 bottom: 40px; width: 420px; height: 12px; background: #000; border-radius: 6px;93 }94</style>95</head>96<body>97<div id="render-target">98 <!-- Status bar -->99 <div class="status-bar">100 <div class="status-content">101 <div>1:02</div>102 <div class="status-icons">103 <!-- WiFi icon -->104 <svg viewBox="0 0 64 64">105 <path d="M10 24c14-12 30-12 44 0" stroke="#333" stroke-width="4" fill="none"/>106 <path d="M18 32c10-8 18-8 28 0" stroke="#333" stroke-width="4" fill="none"/>107 <path d="M26 40c6-4 10-4 16 0" stroke="#333" stroke-width="4" fill="none"/>108 <circle cx="34" cy="48" r="3" fill="#333"/>109 </svg>110 <!-- Battery icon -->111 <svg viewBox="0 0 80 40">112 <rect x="4" y="8" width="64" height="24" rx="6" ry="6" stroke="#333" stroke-width="3" fill="none"/>113 <rect x="8" y="12" width="52" height="16" rx="4" ry="4" fill="#333"/>114 <rect x="68" y="14" width="8" height="12" rx="2" fill="#333"/>115 </svg>116 </div>117 </div>118 </div>119 120 <!-- Header -->121 <div class="header">122 <div class="icon-btn menu">123 <svg viewBox="0 0 64 44">124 <path d="M4 6h56M4 22h56M4 38h56" stroke="#111" stroke-width="4" stroke-linecap="round" fill="none"/>125 </svg>126 </div>127 <div class="brand">canvas trainers</div>128 <div class="header-icons">129 <div class="icon-btn">130 <!-- Search -->131 <svg viewBox="0 0 56 56">132 <circle cx="24" cy="24" r="16"/>133 <line x1="36" y1="36" x2="52" y2="52"/>134 </svg>135 </div>136 <div class="icon-btn">137 <!-- User -->138 <svg viewBox="0 0 56 56">139 <circle cx="28" cy="18" r="10"/>140 <path d="M8 50c0-12 40-12 40 0"/>141 </svg>142 </div>143 <div class="icon-btn">144 <!-- Heart -->145 <svg viewBox="0 0 56 56">146 <path d="M28 48s-18-12-18-26c0-6 5-11 11-11 5 0 8 3 7.5 5.5M28 48s18-12 18-26c0-6-5-11-11-11-5 0-8 3-7.5 5.5" stroke-linejoin="round"/>147 </svg>148 </div>149 <div class="icon-btn">150 <!-- Bag -->151 <svg viewBox="0 0 56 56">152 <path d="M14 20h28l2 28H12z"/>153 <path d="M18 20c0-8 20-8 20 0" />154 </svg>155 </div>156 </div>157 </div>158 159 <!-- Filter row -->160 <div class="filters-row">161 <div class="label">162 DEPARTMENT163 <svg viewBox="0 0 32 32">164 <path d="M6 12l10 10 10-10" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#111" stroke-width="3"/>165 </svg>166 </div>167 <div class="right">168 <div class="label">FILTER & SORT</div>169 <!-- sliders icon -->170 <svg viewBox="0 0 48 48">171 <circle cx="14" cy="12" r="4" stroke="#111" fill="none" stroke-width="3"/>172 <line x1="4" y1="12" x2="10" y2="12" stroke="#111" stroke-width="3"/>173 <line x1="18" y1="12" x2="44" y2="12" stroke="#111" stroke-width="3"/>174 <circle cx="34" cy="24" r="4" stroke="#111" fill="none" stroke-width="3"/>175 <line x1="4" y1="24" x2="30" y2="24" stroke="#111" stroke-width="3"/>176 <line x1="38" y1="24" x2="44" y2="24" stroke="#111" stroke-width="3"/>177 <circle cx="20" cy="36" r="4" stroke="#111" fill="none" stroke-width="3"/>178 <line x1="4" y1="36" x2="16" y2="36" stroke="#111" stroke-width="3"/>179 <line x1="24" y1="36" x2="44" y2="36" stroke="#111" stroke-width="3"/>180 </svg>181 </div>182 </div>183 184 <!-- Sub row: tabs and items count -->185 <div class="sub-row">186 <div class="tabs">187 <div class="muted">Model</div>188 <div class="active">Product</div>189 </div>190 <div class="items-count">191 <div>61 Items</div>192 <div class="toggle-icons">193 <!-- list icon -->194 <svg viewBox="0 0 42 42">195 <rect x="4" y="6" width="34" height="30" rx="3" ry="3" stroke="#111" fill="none"/>196 </svg>197 <!-- grid icon (active) -->198 <svg viewBox="0 0 42 42">199 <rect x="4" y="6" width="34" height="30" rx="3" ry="3" stroke="#D32F2F" fill="none"/>200 <rect x="8" y="10" width="12" height="12" fill="#D32F2F"/>201 <rect x="22" y="10" width="12" height="12" fill="#D32F2F"/>202 <rect x="8" y="24" width="12" height="12" fill="#D32F2F"/>203 <rect x="22" y="24" width="12" height="12" fill="#D32F2F"/>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Product grid -->210 <div class="grid">211 <!-- Card 1 -->212 <div class="card">213 <div class="img-box">214 [IMG: White canvas low-top shoe]215 <div class="img-heart">216 <svg viewBox="0 0 56 56">217 <path d="M28 48s-18-12-18-26c0-6 5-11 11-11 5 0 8 3 7.5 5.5M28 48s18-12 18-26c0-6-5-11-11-11-5 0-8 3-7.5 5.5" stroke-linejoin="round"/>218 </svg>219 </div>220 </div>221 <div class="title">Canvas trainers</div>222 <div class="price">223 <span class="sale">Rs. 719.00</span>224 <span class="old">Rs. 1,299.00</span>225 </div>226 <div class="swatches">227 <span class="dot white"></span>228 <span class="dot black"></span>229 </div>230 </div>231 232 <!-- Card 2 -->233 <div class="card">234 <div class="img-box">235 [IMG: Black canvas shoe suspended on stand]236 <div class="img-heart">237 <svg viewBox="0 0 56 56">238 <path d="M28 48s-18-12-18-26c0-6 5-11 11-11 5 0 8 3 7.5 5.5M28 48s18-12 18-26c0-6-5-11-11-11-5 0-8 3-7.5 5.5" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 <div class="title">Canvas trainers</div>243 <div class="price">244 <span>Rs. 1,999.00</span>245 </div>246 <div class="swatches">247 <span class="dot black"></span>248 <span class="dot white"></span>249 <span class="dot gray"></span>250 </div>251 </div>252 253 <!-- Card 3 -->254 <div class="card">255 <div class="img-box">256 [IMG: Black canvas low-top shoe]257 <div class="img-heart">258 <svg viewBox="0 0 56 56">259 <path d="M28 48s-18-12-18-26c0-6 5-11 11-11 5 0 8 3 7.5 5.5M28 48s18-12 18-26c0-6-5-11-11-11-5 0-8 3-7.5 5.5" stroke-linejoin="round"/>260 </svg>261 </div>262 </div>263 <div class="title">Canvas trainers</div>264 <div class="price"><span>Rs. 1,499.00</span></div>265 <div class="swatches">266 <span class="dot black"></span>267 <span class="dot gray"></span>268 </div>269 </div>270 271 <!-- Card 4 -->272 <div class="card">273 <div class="img-box">274 [IMG: White high-top canvas shoe]275 <div class="img-heart">276 <svg viewBox="0 0 56 56">277 <path d="M28 48s-18-12-18-26c0-6 5-11 11-11 5 0 8 3 7.5 5.5M28 48s18-12 18-26c0-6-5-11-11-11-5 0-8 3-7.5 5.5" stroke-linejoin="round"/>278 </svg>279 </div>280 </div>281 <div class="title">Canvas trainers</div>282 <div class="price"><span>Rs. 1,899.00</span></div>283 <div class="swatches">284 <span class="dot white"></span>285 <span class="dot off"></span>286 </div>287 </div>288 </div>289 290 <!-- Home indicator -->291 <div class="home-indicator"></div>292</div>293</body>294</html>