GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Asian Shoes for Men - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Top gradient header area */18 .header-wrap {19 width: 100%;20 background: linear-gradient(180deg, #bfe6dd 0%, #b6e3d8 50%, #a7ddd1 100%);21 padding-bottom: 18px;22 }23 .status-bar {24 height: 64px;25 display: flex;26 align-items: center;27 padding: 0 28px;28 font-size: 30px;29 color: #1a1a1a;30 opacity: 0.9;31 }32 .status-icons {33 margin-left: auto;34 display: flex;35 gap: 18px;36 align-items: center;37 font-size: 28px;38 }39 40 .search-row {41 display: flex;42 align-items: center;43 padding: 18px 24px 8px 24px;44 gap: 16px;45 }46 .icon-btn {47 width: 64px;48 height: 64px;49 border-radius: 32px;50 display: inline-flex;51 align-items: center;52 justify-content: center;53 }54 .icon-btn svg { width: 38px; height: 38px; fill: #333; }55 56 .search-bar {57 flex: 1;58 height: 92px;59 border-radius: 16px;60 background: #ffffff;61 border: 2px solid #dcdcdc;62 display: flex;63 align-items: center;64 padding: 0 18px;65 gap: 16px;66 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;67 }68 .search-bar .mag {69 width: 40px; height: 40px;70 }71 .search-input {72 flex: 1;73 color: #222;74 font-size: 34px;75 }76 .camera-btn {77 width: 66px; height: 66px;78 border: 2px solid #b5d7d1;79 border-radius: 50%;80 display: flex; align-items: center; justify-content: center;81 background: #ecfaf7;82 }83 .camera-btn svg { width: 34px; height: 34px; fill: #2b6f66; }84 85 .location-row {86 display: flex;87 align-items: center;88 padding: 8px 28px 10px 28px;89 gap: 12px;90 font-size: 30px;91 color: #2c3e40;92 }93 .location-dot {94 width: 28px; height: 28px; border-radius: 50%;95 background: #1f6d63;96 }97 .location-row .chev { margin-left: 10px; width: 24px; height: 24px; }98 99 .chips-row {100 display: flex;101 gap: 16px;102 padding: 10px 20px 16px 20px;103 overflow: hidden;104 }105 .chip, .chip-outline {106 padding: 18px 26px;107 border-radius: 28px;108 font-size: 30px;109 white-space: nowrap;110 }111 .chip {112 background: #fff;113 border: 2px solid #e5e5e5;114 }115 .chip-outline {116 background: #ffffff;117 border: 2px solid #e5e5e5;118 }119 .chip .toggle {120 display: inline-block;121 width: 44px; height: 26px;122 border-radius: 16px;123 background: #f0f0f0;124 margin-left: 10px;125 vertical-align: middle;126 position: relative;127 }128 .chip .toggle:after {129 content: "";130 position: absolute;131 width: 20px; height: 20px; border-radius: 50%;132 background: #ffffff; border: 1px solid #cfcfcf;133 top: 3px; left: 3px;134 }135 136 /* Brand banner section */137 .brand-header {138 display: flex;139 align-items: center;140 padding: 18px 24px 8px;141 gap: 16px;142 }143 .brand-logo {144 height: 54px;145 width: 140px;146 background: #e0e0e0;147 border: 1px solid #bdbdbd;148 display: flex; align-items: center; justify-content: center;149 font-size: 24px; color: #666;150 text-transform: uppercase;151 }152 .brand-title {153 font-size: 36px;154 font-weight: 700;155 color: #222;156 }157 158 .top-brand-label {159 position: absolute;160 top: 0; left: 0;161 transform: translate(24px, 18px);162 background: #444;163 color: #fff;164 padding: 10px 16px;165 border-radius: 12px;166 font-size: 28px;167 }168 .brand-banner {169 position: relative;170 margin: 0 24px;171 border-radius: 16px;172 overflow: hidden;173 height: 520px;174 background: #E0E0E0;175 border: 1px solid #BDBDBD;176 display: flex; align-items: center; justify-content: center;177 color: #757575; font-size: 34px;178 }179 180 /* Deal cards below banner */181 .deal-row {182 display: flex;183 gap: 24px;184 padding: 18px 24px;185 }186 .deal-card {187 flex: 1;188 min-width: 0;189 border: 1px solid #e5e5e5;190 border-radius: 16px;191 background: #fff;192 overflow: hidden;193 }194 .deal-img {195 height: 200px;196 background: #E0E0E0; border-bottom: 1px solid #d9d9d9;197 display: flex; align-items: center; justify-content: center;198 color: #757575; font-size: 28px;199 }200 .deal-body {201 padding: 18px;202 }203 .deal-badge {204 background: #d2411e;205 color: #fff;206 display: inline-block;207 padding: 10px 16px;208 border-radius: 10px;209 font-size: 28px;210 margin-bottom: 12px;211 }212 .price-line {213 display: flex; align-items: baseline; gap: 10px;214 font-size: 40px; font-weight: 700;215 }216 .strike {217 color: #6a6a6a; text-decoration: line-through; font-size: 28px; font-weight: 500;218 margin-top: 8px; display: inline-block;219 }220 .off {221 color: #2b7c59; font-size: 28px; margin-left: 6px;222 }223 224 .brand-footer {225 display: flex;226 align-items: center;227 justify-content: space-between;228 padding: 12px 24px 8px;229 color: #5f6368;230 font-size: 30px;231 }232 .brand-footer .link {233 color: #0a6b61; font-weight: 600;234 }235 236 .subnote {237 padding: 16px 24px;238 color: #444;239 font-size: 32px;240 }241 242 /* Product grid */243 .product-grid {244 display: grid;245 grid-template-columns: 1fr 1fr;246 gap: 24px;247 padding: 0 24px 24px;248 }249 .product-card {250 background: #fff;251 border: 1px solid #e6e6e6;252 border-radius: 16px;253 overflow: hidden;254 }255 .prod-img {256 height: 520px;257 background: #E0E0E0;258 border-bottom: 1px solid #d9d9d9;259 display: flex; align-items: center; justify-content: center;260 color: #757575; font-size: 30px;261 }262 .prod-body {263 padding: 18px;264 }265 .prod-title { font-size: 30px; color: #222; }266 .prod-price { font-size: 36px; font-weight: 700; margin-top: 8px; }267 268 /* Bottom navigation */269 .bottom-nav {270 position: absolute;271 bottom: 0; left: 0; right: 0;272 height: 180px;273 background: #ffffff;274 border-top: 1px solid #e6e6e6;275 display: flex; align-items: center; justify-content: space-around;276 padding-bottom: 10px;277 }278 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #1a1a1a; }279 .nav-item svg { width: 56px; height: 56px; fill: #1a1a1a; }280 .nav-item span { font-size: 28px; }281 282 /* Small helpers */283 .muted { color: #777; }284 .sponsored { display: inline-flex; align-items: center; gap: 8px; }285 .info-dot {286 width: 22px; height: 22px; border-radius: 50%;287 border: 2px solid #777; font-size: 16px;288 display: inline-flex; align-items: center; justify-content: center; color: #777;289 }290</style>291</head>292<body>293<div id="render-target">294 295 <div class="header-wrap">296 <!-- Status bar -->297 <div class="status-bar">298 <div>4:07</div>299 <div class="status-icons">300 <span>B</span>301 <span>⋮</span>302 <span>◦</span>303 <span>•</span>304 </div>305 </div>306 307 <!-- Search row -->308 <div class="search-row">309 <div class="icon-btn">310 <svg viewBox="0 0 24 24"><path d="M15.5 3.9 13.8 2.2 4 12l9.8 9.8 1.7-1.7L7.4 12l8.1-8.1z"/></svg>311 </div>312 <div class="search-bar">313 <svg class="mag" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8L20 21l1-1-5.5-6zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>314 <div class="search-input">asian shoes for men</div>315 <div class="camera-btn">316 <svg viewBox="0 0 24 24"><path d="M20 6h-3.2l-1.2-2H8.4L7.2 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-8 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>317 </div>318 </div>319 </div>320 321 <!-- Location -->322 <div class="location-row">323 <div class="location-dot"></div>324 <div>Delivering to Mohali 160071 - Update location</div>325 <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>326 </div>327 328 <!-- Chips -->329 <div class="chips-row">330 <div class="chip">prime <span class="toggle"></span></div>331 <div class="chip">Lace-Up</div>332 <div class="chip">Hook & Loop</div>333 <div class="chip">Buckles</div>334 <div class="chip-outline">Filters ▼</div>335 </div>336 </div>337 338 <!-- Brand header -->339 <div class="brand-header">340 <div class="brand-logo">[asian]</div>341 <div class="brand-title">Men Sports Shoes</div>342 </div>343 344 <!-- Banner -->345 <div class="brand-banner">346 <div class="top-brand-label">Top Brand</div>347 [IMG: Promotional banner showing men's sports shoes]348 </div>349 350 <!-- Deals Row -->351 <div class="deal-row">352 <div class="deal-card">353 <div class="deal-img">[IMG: Grey sports shoe]</div>354 <div class="deal-body">355 <div class="deal-badge">Deal of the Day</div>356 <div class="price-line">₹699 <span class="muted" style="font-size:28px;">prime</span></div>357 <div><span class="strike">₹1,499</span> <span class="off">(53% off)</span></div>358 </div>359 </div>360 <div class="deal-card">361 <div class="deal-img">[IMG: Grey & black sneaker]</div>362 <div class="deal-body">363 <div class="deal-badge">Deal of the Day</div>364 <div class="price-line">₹1,117</div>365 <div><span class="strike">₹2,299</span> <span class="off">(51% off)</span></div>366 </div>367 </div>368 </div>369 370 <!-- Footer below deals -->371 <div class="brand-footer">372 <div class="link">Shop ASIAN ></div>373 <div class="sponsored">Sponsored <span class="info-dot">i</span></div>374 </div>375 376 <div class="subnote">Price and other details may vary based on product size and colour.</div>377 378 <!-- Product Grid -->379 <div class="product-grid">380 <div class="product-card">381 <div class="prod-img">[IMG: Black running shoe]</div>382 <div class="prod-body">383 <div class="prod-title">Campus Men's Running Shoe</div>384 <div class="prod-price">₹1,049</div>385 </div>386 </div>387 <div class="product-card">388 <div class="prod-img">[IMG: White mesh sneaker]</div>389 <div class="prod-body">390 <div class="prod-title">Casual White Mesh Sneaker</div>391 <div class="prod-price">₹1,299</div>392 </div>393 </div>394 </div>395 396 <!-- Bottom Navigation -->397 <div class="bottom-nav">398 <div class="nav-item">399 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>400 <span>Home</span>401 </div>402 <div class="nav-item">403 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg>404 <span>You</span>405 </div>406 <div class="nav-item">407 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm2 4h12v2H6zm3 4h9v2H9zm-3 4h12v2H6z"/></svg>408 <span>More</span>409 </div>410 <div class="nav-item">411 <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 9H9L7 6zm-2 0H2v2h2l3.6 9.6c.2.5.7.9 1.4.9h9v-2H9.4l-.3-.8L19 13H8.2L6.7 6zM9 20a2 2 0 1 0 .001 3.999A2 2 0 0 0 9 20zm8 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 20z"/></svg>412 <span>Cart</span>413 </div>414 <div class="nav-item">415 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>416 <span>Menu</span>417 </div>418 </div>419 420</div>421</body>422</html>