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>Search - Chelsea boots</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: #CFCFCF;23 color: #ffffff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 font-size: 40px;29 letter-spacing: 0.5px;30 }31 .status-left, .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .status-icon {37 width: 42px; height: 42px;38 }39 40 /* Header */41 .header {42 height: 140px;43 display: flex;44 align-items: center;45 padding: 0 36px;46 border-bottom: 1px solid #eee;47 }48 .header .title {49 font-size: 56px;50 font-weight: 700;51 margin-left: 24px;52 }53 .header .right-icons {54 margin-left: auto;55 display: flex;56 gap: 40px;57 }58 .ico {59 width: 54px; height: 54px; color: #1f1f1f;60 }61 62 /* Controls row */63 .controls {64 display: flex;65 align-items: center;66 justify-content: space-between;67 padding: 32px 48px;68 }69 .controls .control {70 display: flex;71 align-items: center;72 gap: 18px;73 font-weight: 800;74 letter-spacing: 0.5px;75 color: #222;76 font-size: 36px;77 }78 .controls .control .chev {79 width: 28px; height: 28px;80 }81 82 /* Result summary */83 .result-summary {84 text-align: center;85 padding: 30px 80px 10px;86 }87 .result-summary h2 {88 font-size: 44px;89 margin: 12px 0 18px;90 font-weight: 800;91 }92 .result-summary p {93 font-size: 32px;94 color: #666;95 margin: 6px 0;96 line-height: 1.4;97 }98 99 /* Suggestions */100 .suggestions {101 padding: 10px 48px 20px;102 }103 .suggest-item {104 display: flex;105 align-items: center;106 justify-content: space-between;107 padding: 28px 0;108 border-bottom: 1px solid #f0f0f0;109 }110 .suggest-item span {111 font-size: 42px;112 color: #333;113 }114 .arrow-right {115 width: 40px; height: 40px;116 }117 118 /* Tabs row */119 .tabs-row {120 display: flex;121 align-items: center;122 padding: 40px 48px 24px;123 border-top: 12px solid #fafafa;124 }125 .tabs {126 display: flex;127 gap: 40px;128 font-size: 34px;129 color: #666;130 }131 .tabs .active {132 color: #111;133 font-weight: 700;134 position: relative;135 }136 .tabs .active:after {137 content: "";138 position: absolute;139 left: 0; right: 0; bottom: -12px;140 height: 6px;141 background: #a32020;142 border-radius: 3px;143 }144 .tabs-row .right {145 margin-left: auto;146 display: flex;147 align-items: center;148 gap: 20px;149 color: #666;150 font-size: 32px;151 }152 .grid-ico, .list-ico {153 width: 44px; height: 44px;154 }155 156 /* Product grid */157 .products {158 padding: 12px 36px 0;159 display: grid;160 grid-template-columns: 1fr 1fr;161 gap: 36px;162 }163 .card {164 background: #ffffff;165 }166 .img-wrap {167 position: relative;168 width: 100%;169 height: 600px;170 background: #F7F7F7;171 border: 1px solid #e5e5e5;172 display: flex;173 align-items: center;174 justify-content: center;175 color: #757575;176 font-size: 30px;177 }178 .fav-btn {179 position: absolute;180 right: 24px;181 bottom: 24px;182 width: 64px; height: 64px;183 background: #ffffff;184 border-radius: 50%;185 border: 2px solid #eee;186 display: flex; align-items: center; justify-content: center;187 }188 .card h3 {189 font-size: 36px;190 margin: 22px 6px 8px;191 font-weight: 600;192 color: #333;193 }194 .price {195 font-size: 34px;196 margin: 0 6px 10px;197 font-weight: 700;198 }199 .colors {200 display: flex; gap: 16px;201 padding: 10px 6px 30px;202 }203 .dot {204 width: 20px; height: 20px;205 border-radius: 50%;206 border: 2px solid #d0d0d0;207 }208 .dot.black { background: #111; border-color: #111; }209 .dot.grey { background: #7e7e72; border-color: #7e7e72; }210 211 /* Bottom home indicator */212 .home-indicator {213 position: absolute;214 left: 0; right: 0;215 bottom: 24px;216 height: 18px;217 width: 360px;218 background: #0e0e0e;219 border-radius: 12px;220 margin: 0 auto;221 opacity: 0.9;222 }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status Bar -->229 <div class="status-bar">230 <div class="status-left">231 <div>2:53</div>232 <!-- simple status icons -->233 <svg class="status-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/></svg>234 <svg class="status-icon" viewBox="0 0 24 24" fill="none"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>235 <svg class="status-icon" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"/></svg>236 </div>237 <div class="status-right">238 <svg class="status-icon" viewBox="0 0 24 24" fill="none"><path d="M2 10l5-5m15 15l-5-5" stroke="#fff" stroke-width="2"/></svg>239 <svg class="status-icon" viewBox="0 0 24 24" fill="none"><path d="M3 12h13a5 5 0 015 5v2" stroke="#fff" stroke-width="2"/></svg>240 <div>100%</div>241 </div>242 </div>243 244 <!-- Header -->245 <div class="header">246 <!-- Hamburger -->247 <svg class="ico" viewBox="0 0 24 24" fill="none">248 <path d="M3 6h18M3 12h14M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>249 </svg>250 <div class="title">Chalsea boots</div>251 <div class="right-icons">252 <!-- Search -->253 <svg class="ico" viewBox="0 0 24 24" fill="none">254 <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>255 <path d="M21 21l-4.3-4.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>256 </svg>257 <!-- User -->258 <svg class="ico" viewBox="0 0 24 24" fill="none">259 <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>260 <path d="M4 21c2.5-4 13.5-4 16 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>261 </svg>262 <!-- Heart -->263 <svg class="ico" viewBox="0 0 24 24" fill="none">264 <path d="M12 21s-7-4.6-9-8.5C1.4 9.7 3.1 6 6.8 6c1.8 0 3.1.9 4.2 2.1C12.1 6.9 13.4 6 15.2 6 18.9 6 20.6 9.7 21 12.5 19 16.4 12 21 12 21z" stroke="currentColor" stroke-width="2" fill="none"/>265 </svg>266 <!-- Bag -->267 <svg class="ico" viewBox="0 0 24 24" fill="none">268 <rect x="4" y="8" width="16" height="12" rx="2" stroke="currentColor" stroke-width="2"/>269 <path d="M8 8V6a4 4 0 118 0v2" stroke="currentColor" stroke-width="2"/>270 </svg>271 </div>272 </div>273 274 <!-- Controls -->275 <div class="controls">276 <div class="control">277 <span>DEPARTMENT</span>278 <svg class="chev" viewBox="0 0 24 24" fill="none">279 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <div class="control">283 <span>FILTER & SORT</span>284 <svg class="chev" viewBox="0 0 24 24" fill="none">285 <path d="M4 7h16M8 12h8M10 17h4" stroke="#333" stroke-width="2" stroke-linecap="round"/>286 </svg>287 </div>288 </div>289 290 <!-- Result summary -->291 <div class="result-summary">292 <h2>Search result for "chelsea boots"</h2>293 <p>Your search "Chalsea boots" did not match any results.<br/>Did you mean:</p>294 </div>295 296 <!-- Suggestions -->297 <div class="suggestions">298 <div class="suggest-item">299 <span>chelsea boots</span>300 <svg class="arrow-right" viewBox="0 0 24 24" fill="none">301 <path d="M9 6l6 6-6 6" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>302 </svg>303 </div>304 <div class="suggest-item" style="border-bottom:none;">305 <span>chelsea boot</span>306 <svg class="arrow-right" viewBox="0 0 24 24" fill="none">307 <path d="M9 6l6 6-6 6" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 </div>311 312 <!-- Tabs row -->313 <div class="tabs-row">314 <div class="tabs">315 <div>Model</div>316 <div class="active">Product</div>317 </div>318 <div class="right">319 <span>55 Items</span>320 <!-- list icon -->321 <svg class="list-ico" viewBox="0 0 24 24" fill="none">322 <rect x="4" y="4" width="16" height="16" rx="2" stroke="#777" stroke-width="2"/>323 </svg>324 <!-- grid icon -->325 <svg class="grid-ico" viewBox="0 0 24 24" fill="#a32020">326 <rect x="3" y="3" width="8" height="8" rx="1"/>327 <rect x="13" y="3" width="8" height="8" rx="1"/>328 <rect x="3" y="13" width="8" height="8" rx="1"/>329 <rect x="13" y="13" width="8" height="8" rx="1"/>330 </svg>331 </div>332 </div>333 334 <!-- Products -->335 <div class="products">336 <!-- Card 1 -->337 <div class="card">338 <div class="img-wrap">339 [IMG: Black Chelsea boot - left side]340 <div class="fav-btn">341 <svg viewBox="0 0 24 24" width="30" height="30" fill="none">342 <path d="M12 21s-7-4.6-9-8.5C1.4 9.7 3.1 6 6.8 6c1.8 0 3.1.9 4.2 2.1C12.1 6.9 13.4 6 15.2 6 18.9 6 20.6 9.7 21 12.5 19 16.4 12 21 12 21z" stroke="#222" stroke-width="2"/>343 </svg>344 </div>345 </div>346 <h3>Chunky Chelsea Boots</h3>347 <div class="price">$54.99</div>348 <div class="colors">349 <div class="dot black"></div>350 <div class="dot grey"></div>351 </div>352 </div>353 354 <!-- Card 2 -->355 <div class="card">356 <div class="img-wrap">357 [IMG: Black Chelsea boot - right side]358 <div class="fav-btn">359 <svg viewBox="0 0 24 24" width="30" height="30" fill="none">360 <path d="M12 21s-7-4.6-9-8.5C1.4 9.7 3.1 6 6.8 6c1.8 0 3.1.9 4.2 2.1C12.1 6.9 13.4 6 15.2 6 18.9 6 20.6 9.7 21 12.5 19 16.4 12 21 12 21z" stroke="#222" stroke-width="2"/>361 </svg>362 </div>363 </div>364 <h3>Chunky Chelsea Boots</h3>365 <div class="price">$49.99</div>366 <div class="colors">367 <div class="dot black"></div>368 <div class="dot grey"></div>369 </div>370 </div>371 </div>372 373 <div class="home-indicator"></div>374</div>375</body>376</html>