GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile 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: #333;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-weight: 600;24 font-size: 36px;25 color: #1a1a1a;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 22px;31 }32 .icon {33 width: 42px;34 height: 42px;35 }36 .icon svg { width: 100%; height: 100%; }37 38 /* Search header */39 .search-header {40 height: 120px;41 display: flex;42 align-items: center;43 padding: 0 24px;44 gap: 18px;45 }46 .back-btn {47 width: 72px;48 height: 72px;49 display: flex;50 align-items: center;51 justify-content: center;52 }53 .search-input {54 flex: 1;55 height: 84px;56 border: 1px solid #e2e2e2;57 border-radius: 16px;58 padding: 0 22px;59 display: flex;60 align-items: center;61 color: #666;62 font-size: 34px;63 background: #fafafa;64 }65 .search-input span { opacity: 0.9; }66 .header-right {67 display: flex;68 gap: 26px;69 }70 .chip-row {71 padding: 18px 18px 10px 18px;72 display: flex;73 gap: 18px;74 }75 .chip {76 display: flex;77 align-items: center;78 gap: 12px;79 padding: 18px 28px;80 border: 1px solid #dedede;81 border-radius: 50px;82 background: #fff;83 font-size: 30px;84 white-space: nowrap;85 }86 .chip .mini-ico {87 width: 34px; height: 34px;88 border-radius: 50%;89 background: #f2f2f2;90 display: inline-flex;91 align-items: center; justify-content: center;92 }93 94 /* Banner */95 .banner {96 margin: 8px 18px 12px 18px;97 height: 180px;98 border-radius: 18px;99 border: 1px solid #e7e7e7;100 background: linear-gradient(90deg, #ffeceb, #fff7e9);101 display: flex;102 align-items: center;103 justify-content: space-between;104 padding: 0 28px;105 }106 .banner-left {107 display: flex; align-items: center; gap: 18px;108 }109 .coin {110 width: 80px; height: 80px; border-radius: 50%;111 border: 2px dashed #ff6d6d; background: #fff0f0;112 }113 .banner-left .title { font-weight: 700; font-size: 38px; }114 .banner-left .sub { font-weight: 700; font-size: 32px; color: #444; }115 .banner-right {116 display: flex; flex-direction: column; align-items: flex-end;117 }118 .coupon {119 margin-top: 10px;120 padding: 8px 18px;121 border: 2px dashed #d86c62;122 border-radius: 10px;123 font-weight: 800;124 color: #4a4a4a;125 background: #fff;126 }127 .dots {128 width: 100%;129 display: flex; justify-content: center; gap: 10px; margin: 6px 0 6px;130 }131 .dot { width: 12px; height: 12px; background: #c2c2c2; border-radius: 50%; }132 .dot.active { background: #2f3a49; }133 134 /* Product grid */135 .grid {136 display: grid;137 grid-template-columns: 1fr 1fr;138 grid-gap: 10px;139 padding: 0 10px;140 height: 920px;141 }142 .card {143 position: relative;144 background: #fff;145 border: 1px solid #e5e5e5;146 }147 .img {148 height: 900px;149 display: flex; align-items: center; justify-content: center;150 background: #E0E0E0;151 color: #757575;152 border: 1px solid #BDBDBD;153 font-size: 30px;154 text-align: center;155 padding: 16px;156 }157 .rating-pill {158 position: absolute;159 left: 24px; bottom: 24px;160 display: inline-flex; align-items: center; gap: 14px;161 background: rgba(255,255,255,0.95);162 padding: 10px 18px;163 border-radius: 24px;164 border: 1px solid #e0e0e0;165 font-size: 30px;166 }167 .rating-pill .star {168 width: 28px; height: 28px; color: #2e7d32;169 }170 171 /* Category toolbar */172 .toolbar {173 height: 110px;174 border-top: 1px solid #eee;175 border-bottom: 1px solid #eee;176 display: flex;177 align-items: center;178 justify-content: space-around;179 font-weight: 700;180 font-size: 34px;181 }182 .tool {183 display: flex; align-items: center; gap: 14px; color: #39424e;184 }185 .tool .tool-ico { width: 36px; height: 36px; }186 187 /* Keyboard */188 .keyboard {189 position: absolute;190 left: 0; right: 0; bottom: 0;191 height: 900px;192 background: #0f1011;193 border-top: 1px solid #222;194 padding: 20px 18px 18px;195 box-sizing: border-box;196 }197 .kb-topbar {198 display: flex; align-items: center; justify-content: space-between;199 margin-bottom: 10px; color: #bdbdbd; font-size: 28px;200 }201 .kb-icon { width: 54px; height: 54px; background: #1e1f22; border-radius: 12px; }202 .rows { display: grid; grid-template-rows: repeat(4, 1fr); row-gap: 16px; height: calc(100% - 80px); }203 .row { display: flex; justify-content: space-between; gap: 12px; }204 .key {205 flex: 1;206 height: 120px;207 background: #1e1f22;208 border-radius: 18px;209 color: #e9e9e9;210 display: flex; align-items: center; justify-content: center;211 font-size: 44px;212 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);213 }214 .key.small { flex: 0.9; }215 .key.wide { flex: 4; }216 .key.action { background: #2b9961; color: #fff; }217 .spacer { width: 12px; }218 .gesture {219 position: absolute; left: 50%; transform: translateX(-50%);220 bottom: 8px; width: 270px; height: 10px; border-radius: 8px; background: #dedede;221 opacity: 0.8;222 }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status Bar -->229 <div class="status-bar">230 <div>1:01</div>231 <div class="status-icons">232 <div class="icon" title="silent">233 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">234 <path d="M3 3l18 18"/>235 <path d="M6 8v8h4l5 5V3l-5 5H6z"/>236 </svg>237 </div>238 <div class="icon" title="wifi">239 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">240 <path d="M2 8c5-5 15-5 20 0"/>241 <path d="M5 11c3-3 11-3 14 0"/>242 <path d="M8 14c2-2 6-2 8 0"/>243 <circle cx="12" cy="18" r="2" fill="#444" stroke="none"/>244 </svg>245 </div>246 <div class="icon" title="battery">247 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">248 <rect x="2" y="7" width="18" height="10" rx="2"/>249 <rect x="4" y="9" width="12" height="6" fill="#444" stroke="none"/>250 <rect x="20" y="10" width="2" height="4"/>251 </svg>252 </div>253 </div>254 </div>255 256 <!-- Search Header -->257 <div class="search-header">258 <div class="back-btn">259 <svg viewBox="0 0 24 24" class="icon" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">260 <path d="M15 4L7 12l8 8"/>261 </svg>262 </div>263 <div class="search-input">264 <span>Search for brands & products</span>265 </div>266 <div class="header-right">267 <div class="icon">268 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">269 <rect x="3" y="6" width="18" height="12" rx="2"/>270 <circle cx="12" cy="12" r="3"/>271 <rect x="8" y="4" width="8" height="4" fill="#333" stroke="none"/>272 </svg>273 </div>274 <div class="icon">275 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">276 <path d="M12 3v10"/>277 <circle cx="12" cy="14" r="4"/>278 <path d="M8 14v3a4 4 0 0 0 8 0v-3"/>279 </svg>280 </div>281 </div>282 </div>283 284 <!-- Chips -->285 <div class="chip-row">286 <div class="chip">287 <span class="mini-ico"></span>288 <span>Top Brands</span>289 </div>290 <div class="chip">291 <span class="mini-ico"></span>292 <span>Global Brands</span>293 </div>294 <div class="chip">295 <span class="mini-ico"></span>296 <span>Hot Trends</span>297 </div>298 </div>299 300 <!-- Banner -->301 <div class="banner">302 <div class="banner-left">303 <div class="coin"></div>304 <div>305 <div class="title">Guaranteed</div>306 <div class="sub">Refunds</div>307 </div>308 </div>309 <div class="banner-right">310 <div style="color:#c04b3a; font-weight:800; font-size:34px;">₹200 off for you</div>311 <div class="coupon">MYNTRA200</div>312 </div>313 </div>314 315 <div class="dots">316 <div class="dot"></div>317 <div class="dot active"></div>318 <div class="dot"></div>319 </div>320 321 <!-- Product Grid -->322 <div class="grid">323 <div class="card">324 <div class="img">[IMG: Kids ethnic peplum top with yellow dhoti pants]</div>325 </div>326 <div class="card">327 <div class="img">[IMG: Teal embroidered jacket over pink dress]</div>328 <div class="rating-pill">329 <span>3.8</span>330 <svg class="star" viewBox="0 0 24 24" fill="#2e7d32">331 <path d="M12 2l3 7h7l-5.5 4.1L18 21l-6-3.6L6 21l1.5-7.9L2 9h7z"/>332 </svg>333 <span>212</span>334 </div>335 </div>336 </div>337 338 <!-- Toolbar -->339 <div class="toolbar">340 <div class="tool">341 <svg class="tool-ico" viewBox="0 0 24 24" fill="none" stroke="#39424e" stroke-width="2">342 <circle cx="12" cy="8" r="4"/>343 <path d="M4 20c1-4 15-4 16 0"/>344 </svg>345 <span>GIRLS</span>346 </div>347 <div class="tool">348 <svg class="tool-ico" viewBox="0 0 24 24" fill="none" stroke="#39424e" stroke-width="2">349 <path d="M6 3h12M6 9h8M6 15h4"/>350 <path d="M10 9v10"/>351 <path d="M14 15v4"/>352 </svg>353 <span>SORT</span>354 </div>355 <div class="tool">356 <svg class="tool-ico" viewBox="0 0 24 24" fill="none" stroke="#39424e" stroke-width="2">357 <path d="M3 5h18l-6 7v6l-6-3v-3z"/>358 </svg>359 <span>FILTER</span>360 </div>361 </div>362 363 <!-- Keyboard -->364 <div class="keyboard">365 <div class="kb-topbar">366 <div style="display:flex; gap:14px; align-items:center;">367 <div class="kb-icon"></div>368 <div class="kb-icon"></div>369 <div class="kb-icon"></div>370 </div>371 <div class="kb-icon"></div>372 </div>373 <div class="rows">374 <div class="row">375 <div class="key">Q</div>376 <div class="key">W</div>377 <div class="key">E</div>378 <div class="key">R</div>379 <div class="key">T</div>380 <div class="key">Y</div>381 <div class="key">U</div>382 <div class="key">I</div>383 <div class="key">O</div>384 <div class="key">P</div>385 </div>386 <div class="row">387 <div class="key">A</div>388 <div class="key">S</div>389 <div class="key">D</div>390 <div class="key">F</div>391 <div class="key">G</div>392 <div class="key">H</div>393 <div class="key">J</div>394 <div class="key">K</div>395 <div class="key">L</div>396 </div>397 <div class="row">398 <div class="key small">Z</div>399 <div class="key small">X</div>400 <div class="key small">C</div>401 <div class="key small">V</div>402 <div class="key small">B</div>403 <div class="key small">N</div>404 <div class="key small">M</div>405 <div class="key small">⌫</div>406 </div>407 <div class="row">408 <div class="key small">?123</div>409 <div class="key small">,</div>410 <div class="key small">🙂</div>411 <div class="key wide"> </div>412 <div class="key small">.</div>413 <div class="key action">✓</div>414 </div>415 </div>416 <div class="gesture"></div>417 </div>418 419</div>420</body>421</html>