GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Chalsea boots - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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: 150px;19 background: #D3D3D3;20 display: flex;21 align-items: center;22 padding: 0 40px;23 font-size: 36px;24 color: #2b2b2b;25 }26 .status-left { flex: 1; }27 .status-right {28 display: flex;29 align-items: center;30 gap: 28px;31 }32 .battery {33 display: flex;34 align-items: center;35 gap: 12px;36 }37 .pill-signal {38 width: 28px; height: 18px; border: 2px solid #2b2b2b; border-radius: 3px; position: relative;39 }40 .pill-signal::after {41 content: ""; position: absolute; right: -7px; top: 5px; width: 5px; height: 8px; background: #2b2b2b;42 }43 44 /* Header */45 .header {46 height: 130px;47 display: flex;48 align-items: center;49 padding: 0 36px;50 border-bottom: 1px solid #eee;51 }52 .header .left,53 .header .right {54 display: flex;55 align-items: center;56 gap: 36px;57 }58 .header .title {59 flex: 1;60 text-align: left;61 font-size: 54px;62 font-weight: 700;63 }64 .icon {65 width: 54px;66 height: 54px;67 display: inline-flex;68 align-items: center;69 justify-content: center;70 color: #111;71 }72 .icon svg { width: 100%; height: 100%; }73 74 /* Filter row */75 .filter-row {76 display: flex;77 align-items: center;78 justify-content: space-between;79 padding: 20px 36px;80 height: 100px;81 }82 .filter-item {83 display: flex;84 align-items: center;85 font-size: 36px;86 font-weight: 700;87 letter-spacing: 0.5px;88 }89 .filter-item .sub {90 font-weight: 700;91 margin-right: 18px;92 }93 .chev {94 width: 28px;95 height: 28px;96 margin-left: 16px;97 }98 99 /* Search result title */100 .search-title {101 padding: 24px 36px 12px 36px;102 font-size: 42px;103 font-weight: 800;104 }105 .search-desc {106 padding: 0 36px;107 font-size: 32px;108 color: #444;109 line-height: 1.5;110 }111 112 /* Suggestions */113 .suggestions {114 margin-top: 20px;115 }116 .suggestion {117 display: flex;118 align-items: center;119 justify-content: space-between;120 padding: 26px 36px;121 font-size: 40px;122 border-bottom: 1px solid #eee;123 }124 .suggestion .arrow {125 width: 42px; height: 42px;126 }127 128 /* Tabs and items count */129 .tabs-row {130 display: flex;131 align-items: center;132 padding: 22px 36px;133 gap: 40px;134 }135 .tabs {136 display: flex;137 gap: 30px;138 font-size: 36px;139 }140 .tab {141 padding-bottom: 10px;142 color: #666;143 }144 .tab.active {145 color: #7A1C20;146 border-bottom: 4px solid #7A1C20;147 }148 .items-tools {149 margin-left: auto;150 display: flex;151 align-items: center;152 gap: 30px;153 font-size: 34px;154 color: #333;155 }156 .small-icon {157 width: 46px; height: 46px; border: 2px solid #666; display: inline-block;158 }159 .grid-icon {160 display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;161 width: 46px; height: 46px; border: 2px solid #666; padding: 4px;162 }163 .grid-icon span { background: #666; }164 165 /* Product grid */166 .products {167 display: grid;168 grid-template-columns: 1fr 1fr;169 gap: 30px;170 padding: 24px 24px 140px 24px;171 }172 .card {173 background: #fff;174 border: 1px solid #eee;175 padding-bottom: 18px;176 }177 .img-box {178 height: 780px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 display: flex;182 align-items: center;183 justify-content: center;184 color: #757575;185 font-size: 36px;186 position: relative;187 }188 .heart-float {189 position: absolute;190 right: 24px;191 bottom: 24px;192 width: 70px; height: 70px;193 border-radius: 36px;194 display: flex; align-items: center; justify-content: center;195 background: #fff;196 box-shadow: 0 2px 8px rgba(0,0,0,0.12);197 }198 .card .title {199 font-size: 40px;200 padding: 24px;201 }202 .card .price {203 font-size: 38px;204 padding: 0 24px;205 font-weight: 700;206 }207 .color-dots {208 display: flex; gap: 18px; padding: 18px 24px;209 }210 .dot {211 width: 24px; height: 24px; border-radius: 50%;212 border: 2px solid #999;213 }214 .dot.black { background: #111; }215 .dot.grey { background: #706f6f; }216 217 /* Bottom home bar */218 .home-bar {219 position: absolute;220 bottom: 32px;221 left: 50%;222 transform: translateX(-50%);223 width: 520px;224 height: 16px;225 background: #222;226 border-radius: 8px;227 opacity: 0.8;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status Bar -->235 <div class="status-bar">236 <div class="status-left">1:45</div>237 <div class="status-right">238 <span>✓</span>239 <span>✉️</span>240 <span>🔔</span>241 <div class="battery">242 <span>100%</span>243 <div class="pill-signal"></div>244 </div>245 </div>246 </div>247 248 <!-- Header -->249 <div class="header">250 <div class="left">251 <div class="icon">252 <svg viewBox="0 0 24 24">253 <path d="M3 5h18M3 12h18M3 19h18" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>254 </svg>255 </div>256 </div>257 <div class="title">Chalsea boots</div>258 <div class="right">259 <div class="icon">260 <svg viewBox="0 0 24 24">261 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>262 <path d="M20 20l-4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="icon">266 <svg viewBox="0 0 24 24">267 <circle cx="12" cy="8" r="4" stroke="#111" stroke-width="2" fill="none"/>268 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>269 </svg>270 </div>271 <div class="icon">272 <svg viewBox="0 0 24 24">273 <path d="M12 5c2.5-3 6.5-1 6.5 2.5C18.5 11 12 15 12 15S5.5 11 5.5 7.5C5.5 4 9.5 2 12 5z" stroke="#111" stroke-width="2" fill="none" />274 </svg>275 </div>276 <div class="icon">277 <svg viewBox="0 0 24 24">278 <path d="M7 7h10l-1 12H8L7 7z" stroke="#111" stroke-width="2" fill="none"/>279 <path d="M9 7V5c0-1.7 6 0 6 0v2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>280 </svg>281 </div>282 </div>283 </div>284 285 <!-- Filter row -->286 <div class="filter-row">287 <div class="filter-item">288 <span class="sub">DEPARTMENT</span>289 <svg class="chev" viewBox="0 0 24 24">290 <path d="M5 9l7 7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>291 </svg>292 </div>293 <div class="filter-item">294 <span class="sub">FILTER & SORT</span>295 <svg class="chev" viewBox="0 0 24 24">296 <path d="M4 6h16M7 12h10M10 18h4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>297 </svg>298 </div>299 </div>300 301 <!-- Search result section -->302 <div class="search-title">Search result for "chelsea boots"</div>303 <div class="search-desc">304 Your search "Chalsea boots" did not match any results. <br>305 Did you mean:306 </div>307 308 <div class="suggestions">309 <div class="suggestion">310 <span>chelsea boots</span>311 <svg class="arrow" viewBox="0 0 24 24">312 <path d="M8 5l8 7-8 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>313 </svg>314 </div>315 <div class="suggestion">316 <span>chelsea boot</span>317 <svg class="arrow" viewBox="0 0 24 24">318 <path d="M8 5l8 7-8 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>319 </svg>320 </div>321 </div>322 323 <!-- Tabs and tools -->324 <div class="tabs-row">325 <div class="tabs">326 <div class="tab">Model</div>327 <div class="tab active">Product</div>328 </div>329 <div class="items-tools">330 <span>51 Items</span>331 <span class="small-icon"></span>332 <div class="grid-icon">333 <span></span><span></span><span></span>334 <span></span><span></span><span></span>335 <span></span><span></span><span></span>336 </div>337 </div>338 </div>339 340 <!-- Products grid -->341 <div class="products">342 <!-- Card 1 -->343 <div class="card">344 <div class="img-box">345 [IMG: Chunky Chelsea Boot]346 <div class="heart-float">347 <svg viewBox="0 0 24 24">348 <path d="M12 6c2-3 6-1 6 2.3 0 4.2-6 8.2-6 8.2S6 12.5 6 8.3C6 5 10 3 12 6z" stroke="#111" stroke-width="2" fill="none"/>349 </svg>350 </div>351 </div>352 <div class="title">Chunky Chelsea Boots</div>353 <div class="price">$54.99</div>354 <div class="color-dots">355 <span class="dot black"></span>356 <span class="dot grey"></span>357 </div>358 </div>359 360 <!-- Card 2 -->361 <div class="card">362 <div class="img-box">363 [IMG: Chunky Chelsea Boot]364 <div class="heart-float">365 <svg viewBox="0 0 24 24">366 <path d="M12 6c2-3 6-1 6 2.3 0 4.2-6 8.2-6 8.2S6 12.5 6 8.3C6 5 10 3 12 6z" stroke="#111" stroke-width="2" fill="none"/>367 </svg>368 </div>369 </div>370 <div class="title">Chunky Chelsea Boots</div>371 <div class="price">$49.99</div>372 <div class="color-dots">373 <span class="dot black"></span>374 <span class="dot grey"></span>375 </div>376 </div>377 </div>378 379 <!-- Home indicator -->380 <div class="home-bar"></div>381</div>382</body>383</html>