GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Printed Tops with Trousers - UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 80px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #2c2c2c;29 font-weight: 600;30 font-size: 32px;31 }32 .status-icons {33 display: flex;34 gap: 26px;35 align-items: center;36 color: #777;37 font-size: 28px;38 }39 .status-icons svg { width: 34px; height: 34px; }40 41 /* Header / title bar */42 .header {43 position: absolute;44 top: 80px;45 left: 0;46 width: 1080px;47 height: 110px;48 display: flex;49 align-items: center;50 padding: 0 24px;51 box-sizing: border-box;52 border-bottom: 1px solid #eee;53 gap: 20px;54 }55 .header .title {56 font-size: 40px;57 font-weight: 600;58 color: #111;59 flex: 1;60 }61 .icon-btn {62 width: 72px;63 height: 72px;64 border-radius: 36px;65 display: flex;66 align-items: center;67 justify-content: center;68 }69 .icon-btn svg { width: 44px; height: 44px; fill: #222; }70 71 /* Filter chips row */72 .chips {73 position: absolute;74 top: 190px;75 left: 0;76 width: 1080px;77 padding: 0 24px;78 box-sizing: border-box;79 display: flex;80 gap: 22px;81 align-items: center;82 height: 110px;83 }84 .chip {85 height: 80px;86 padding: 0 28px;87 border-radius: 40px;88 background: #fff;89 border: 1px solid #ddd;90 display: inline-flex;91 align-items: center;92 gap: 16px;93 font-size: 30px;94 color: #222;95 box-shadow: 0 2px 6px rgba(0,0,0,0.05);96 white-space: nowrap;97 }98 .chip svg { width: 34px; height: 34px; fill: #444; }99 100 /* Banner */101 .banner {102 position: absolute;103 top: 300px;104 left: 24px;105 width: 1032px;106 height: 160px;107 border-radius: 14px;108 background: linear-gradient(90deg, #ffe9ef 0%, #fff3e5 100%);109 box-shadow: 0 4px 10px rgba(0,0,0,0.06);110 display: flex;111 align-items: center;112 justify-content: space-between;113 padding: 0 28px;114 box-sizing: border-box;115 }116 .banner .left {117 display: flex;118 align-items: center;119 gap: 18px;120 color: #2a2a2a;121 font-size: 34px;122 font-weight: 700;123 }124 .banner .right {125 display: flex;126 align-items: center;127 gap: 22px;128 }129 .coupon {130 font-size: 30px;131 color: #333;132 display: flex;133 flex-direction: column;134 align-items: flex-start;135 line-height: 1.1;136 }137 .coupon .code {138 margin-top: 8px;139 padding: 10px 18px;140 border: 2px dashed #e36c6c;141 border-radius: 12px;142 color: #c33;143 font-weight: 800;144 background: #fff;145 }146 .tag-200 {147 background: #ff6b6b;148 color: #fff;149 font-weight: 800;150 font-size: 28px;151 padding: 12px 18px;152 border-radius: 12px;153 }154 155 /* Carousel dots */156 .dots {157 position: absolute;158 top: 470px;159 width: 1080px;160 display: flex;161 justify-content: center;162 gap: 12px;163 }164 .dot { width: 14px; height: 14px; background: #cfd8dc; border-radius: 7px; }165 .dot.active { background: #616161; }166 167 /* Product grid */168 .grid {169 position: absolute;170 top: 510px;171 left: 0;172 width: 1080px;173 padding: 0 0;174 display: grid;175 grid-template-columns: 1fr 1fr;176 grid-gap: 0;177 }178 .card {179 width: 540px;180 height: 940px;181 position: relative;182 border-bottom: 1px solid #eee;183 }184 .img {185 width: 100%;186 height: 940px;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 color: #757575;190 display: flex;191 align-items: center;192 justify-content: center;193 padding: 24px;194 box-sizing: border-box;195 text-align: center;196 font-size: 30px;197 line-height: 1.3;198 }199 200 /* Rating pill overlay on right image */201 .rating-pill {202 position: absolute;203 left: 32px;204 bottom: 110px;205 background: rgba(255,255,255,0.95);206 border: 1px solid #ddd;207 border-radius: 28px;208 padding: 12px 18px;209 display: inline-flex;210 align-items: center;211 gap: 12px;212 font-size: 30px;213 color: #333;214 }215 .rating-pill .star {216 width: 28px; height: 28px; fill: #4caf50;217 }218 219 /* Bottom toolbar above keyboard */220 .toolbar {221 position: absolute;222 top: 1450px;223 left: 0;224 width: 1080px;225 height: 100px;226 border-top: 1px solid #eee;227 border-bottom: 1px solid #eee;228 background: #fff;229 display: flex;230 align-items: center;231 justify-content: space-around;232 font-size: 34px;233 color: #333;234 }235 .toolbar .item {236 display: flex;237 align-items: center;238 gap: 14px;239 font-weight: 700;240 }241 .toolbar svg { width: 34px; height: 34px; fill: #444; }242 .red-dot {243 width: 14px; height: 14px; background: #ff4c4c; border-radius: 7px; margin-left: 6px;244 }245 246 /* Keyboard overlay */247 .keyboard {248 position: absolute;249 left: 0;250 bottom: 0;251 width: 1080px;252 height: 850px;253 background: #121212;254 box-shadow: 0 -6px 18px rgba(0,0,0,0.4);255 color: #cfcfcf;256 }257 .kb-top {258 height: 90px;259 display: flex;260 align-items: center;261 padding: 0 24px;262 box-sizing: border-box;263 gap: 20px;264 font-size: 34px;265 }266 .kb-field {267 background: #1e1e1e;268 border-radius: 20px;269 padding: 16px 22px;270 color: #eaeaea;271 flex: 1;272 font-size: 34px;273 }274 .kb-rows {275 padding: 16px 24px;276 display: grid;277 grid-template-rows: repeat(4, 1fr);278 gap: 18px;279 box-sizing: border-box;280 }281 .kb-row {282 display: grid;283 grid-template-columns: repeat(10, 1fr);284 gap: 14px;285 }286 .key {287 height: 110px;288 background: #1f1f1f;289 border-radius: 16px;290 display: flex;291 align-items: center;292 justify-content: center;293 color: #e1e1e1;294 font-size: 42px;295 border: 1px solid #2a2a2a;296 }297 .key.wide { grid-column: span 3; }298 .key.space { grid-column: span 5; }299 .key.enter {300 background: #b7f5c9;301 color: #0e3b1f;302 border-color: #a0eab6;303 }304 .bottom-row {305 display: grid;306 grid-template-columns: 1fr 1fr 5fr 1fr 1fr;307 gap: 14px;308 margin-top: 18px;309 }310</style>311</head>312<body>313<div id="render-target">314 315 <!-- Status bar -->316 <div class="status-bar">317 <div>1:01</div>318 <div class="status-icons">319 <svg viewBox="0 0 24 24"><path d="M3 8h18v11H3zM6 5h12v3H6z"/></svg>320 <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 7-7-7 7-7zm0 4.5L7.5 11 12 15.5 16.5 11 12 6.5z"/></svg>321 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4zM7 9h10v6H7z"/></svg>322 <svg viewBox="0 0 24 24"><path d="M17 1l4 4-13 13H4v-4L17 1z"/></svg>323 <svg viewBox="0 0 24 24"><path d="M7 3h10l1 3H6l1-3zm-2 5h14l-2 13H7L5 8z"/></svg>324 <svg viewBox="0 0 24 24"><path d="M18.5 3l2 2-2 2-2-2 2-2zM3 7h12v2H3V7zm0 5h14v2H3v-2zm0 5h10v2H3v-2z"/></svg>325 </div>326 </div>327 328 <!-- Header -->329 <div class="header">330 <div class="icon-btn" aria-label="Back">331 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>332 </div>333 <div class="title">printed Tops with Trousers</div>334 <div class="icon-btn" aria-label="Close">335 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>336 </div>337 </div>338 339 <!-- Chips -->340 <div class="chips">341 <div class="chip">342 <svg viewBox="0 0 24 24"><path d="M12 2l3 5 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1 3-5z"/></svg>343 Top Brands344 </div>345 <div class="chip">346 <svg viewBox="0 0 24 24"><path d="M12 2a8 8 0 100 16 8 8 0 000-16zm0 3a5 5 0 110 10 5 5 0 010-10z"/></svg>347 Global Brands348 </div>349 <div class="chip">350 <svg viewBox="0 0 24 24"><path d="M9 3h6v4H9V3zm-4 6h14v4H5V9zm3 6h8v4H8v-4z"/></svg>351 Hot Trends352 </div>353 </div>354 355 <!-- Banner -->356 <div class="banner">357 <div class="left">358 <svg viewBox="0 0 24 24"><path d="M10 6l-4 4 4 4M14 6l4 4-4 4" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>359 <div>Easy Return &<br/>Exchange</div>360 </div>361 <div class="right">362 <div class="tag-200">₹200 OFF</div>363 <div class="coupon">364 ₹200 off for you365 <div class="code">MYNTRA200</div>366 </div>367 </div>368 </div>369 370 <!-- Carousel dots -->371 <div class="dots">372 <div class="dot"></div>373 <div class="dot active"></div>374 <div class="dot"></div>375 </div>376 377 <!-- Product grid -->378 <div class="grid">379 <div class="card">380 <div class="img">[IMG: Girl printed peplum top with yellow trousers]</div>381 </div>382 <div class="card">383 <div class="img">[IMG: Girl mint overlay top with pink dress]</div>384 <div class="rating-pill">385 <span>3.8</span>386 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1 3-6z"/></svg>387 <span>212</span>388 </div>389 </div>390 </div>391 392 <!-- Bottom toolbar -->393 <div class="toolbar">394 <div class="item">395 GIRLS396 </div>397 <div class="item">398 <svg viewBox="0 0 24 24"><path d="M8 4l4 4 4-4M8 20l4-4 4 4" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>399 SORT400 </div>401 <div class="item">402 <svg viewBox="0 0 24 24"><path d="M4 6h16l-6 7v5l-4-2v-3L4 6z"/></svg>403 FILTER404 <span class="red-dot"></span>405 </div>406 </div>407 408 <!-- Keyboard overlay -->409 <div class="keyboard">410 <div class="kb-top">411 <div class="kb-field">Trousers</div>412 <div style="width:44px;height:44px;border-radius:8px;background:#1e1e1e;display:flex;align-items:center;justify-content:center;">413 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M7 2h10l-2 20H9L7 2zM9 8h6v2H9V8z" fill="#5c8df1"/></svg>414 </div>415 <div style="width:44px;height:44px;border-radius:22px;background:#1e1e1e;display:flex;align-items:center;justify-content:center;">416 <svg viewBox="0 0 24 24" width="26" height="26"><path d="M16 2l6 6-6 6-6-6 6-6z" fill="#8e8e8e"/></svg>417 </div>418 </div>419 <div class="kb-rows">420 <div class="kb-row">421 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>422 </div>423 <div class="kb-row">424 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>425 </div>426 <div class="kb-row">427 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key enter">✓</div>428 </div>429 <div class="bottom-row">430 <div class="key wide">?123</div>431 <div class="key">⌂</div>432 <div class="key space">space</div>433 <div class="key">.</div>434 <div class="key enter">✓</div>435 </div>436 </div>437 </div>438 439</div>440</body>441</html>