GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Rendered UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Top search area */16 .top-bar {17 display: flex;18 align-items: center;19 gap: 20px;20 padding: 30px 30px 20px 30px;21 }22 .icon-btn {23 width: 72px;24 height: 72px;25 border-radius: 16px;26 border: 1px solid #E0E0E0;27 background: #fff;28 display: flex;29 align-items: center;30 justify-content: center;31 }32 .icon-btn svg { width: 36px; height: 36px; fill: #2E2E2E; }33 34 .search-input {35 flex: 1;36 height: 90px;37 border-radius: 24px;38 border: 1px solid #DADADA;39 background: #F5F6F7;40 display: flex;41 align-items: center;42 padding: 0 26px;43 gap: 18px;44 }45 .search-input .placeholder {46 flex: 1;47 color: #666;48 font-size: 34px;49 }50 .search-input .circle {51 width: 60px;52 height: 60px;53 border-radius: 50%;54 border: 1px solid #D0D0D0;55 background: #fff;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .search-input .circle svg { width: 34px; height: 34px; fill: #444; }61 62 .profile-wrap {63 display: flex;64 align-items: center;65 gap: 18px;66 }67 .profile-pill {68 width: 64px;69 height: 64px;70 border-radius: 50%;71 border: 1px solid #D0D0D0;72 background: #F6F0FF;73 display: flex;74 align-items: center;75 justify-content: center;76 color: #7A49FF;77 font-weight: 700;78 }79 .profile-pill.alt { background: #E6FFF9; color: #11BFA4; }80 81 /* Section titles */82 .section {83 padding: 10px 30px 0 30px;84 }85 .section .title {86 font-weight: 700;87 font-size: 34px;88 color: #2E2E2E;89 letter-spacing: .5px;90 }91 92 /* Photo search buttons */93 .photo-actions {94 display: flex;95 gap: 26px;96 padding: 24px 30px 10px 30px;97 }98 .photo-btn {99 flex: 1;100 height: 160px;101 border: 2px solid #DADADA;102 border-radius: 18px;103 background: #fff;104 display: flex;105 align-items: center;106 gap: 26px;107 padding: 0 34px;108 font-size: 34px;109 color: #2E2E2E;110 font-weight: 600;111 }112 .photo-btn .square-icon {113 width: 86px;114 height: 86px;115 border-radius: 16px;116 background: #F1F1F1;117 border: 1px solid #D0D0D0;118 display: flex;119 align-items: center;120 justify-content: center;121 }122 .photo-btn .square-icon svg { width: 46px; height: 46px; fill: #444; }123 124 /* Recent searches */125 .recent-header {126 display: flex;127 align-items: baseline;128 justify-content: space-between;129 padding: 12px 30px 0 30px;130 }131 .recent-header .title { font-weight: 800; font-size: 36px; color: #2E2E2E; }132 .recent-header .edit { color: #FF6B7C; font-weight: 700; font-size: 32px; }133 134 .recent-row {135 display: flex;136 gap: 24px;137 padding: 18px 24px 28px 24px;138 }139 .recent-item {140 width: 200px;141 display: flex;142 flex-direction: column;143 align-items: center;144 }145 .circle-img {146 width: 150px;147 height: 150px;148 border-radius: 50%;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 display: flex;152 align-items: center;153 justify-content: center;154 color: #757575;155 font-size: 22px;156 text-align: center;157 padding: 8px;158 }159 .recent-item .cap {160 margin-top: 16px;161 text-align: center;162 color: #2E2E2E;163 font-size: 30px;164 line-height: 1.1;165 }166 167 /* Banner */168 .promo-banner {169 margin: 10px 24px;170 height: 300px;171 background: #E0E0E0;172 border: 1px solid #BDBDBD;173 border-radius: 16px;174 display: flex;175 align-items: center;176 justify-content: center;177 color: #6B6B6B;178 font-size: 36px;179 font-weight: 700;180 text-align: center;181 padding: 10px;182 }183 184 /* Most searched articles header */185 .articles-head {186 display: flex;187 align-items: center;188 justify-content: space-between;189 padding: 26px 30px 16px 30px;190 }191 .articles-head .label {192 font-weight: 800;193 font-size: 36px;194 color: #2E2E2E;195 }196 .view-btn {197 background: #FF6B7C;198 color: #fff;199 padding: 20px 28px;200 border-radius: 14px;201 font-weight: 700;202 font-size: 32px;203 }204 205 /* Keyboard */206 .keyboard {207 position: absolute;208 left: 0;209 bottom: 0;210 width: 1080px;211 height: 1000px;212 background: #EEF2E7;213 border-top-left-radius: 24px;214 border-top-right-radius: 24px;215 box-shadow: 0 -2px 8px rgba(0,0,0,0.08);216 padding: 24px;217 }218 .kb-actions {219 display: flex;220 align-items: center;221 gap: 34px;222 padding: 6px 4px 10px 4px;223 }224 .kb-circle {225 width: 80px;226 height: 80px;227 border-radius: 22px;228 background: #DDE3D6;229 display: flex;230 align-items: center;231 justify-content: center;232 color: #2E2E2E;233 font-weight: 700;234 border: 1px solid #CBD4C7;235 }236 .kb-circle svg { width: 40px; height: 40px; fill: #2E2E2E; }237 238 .keys {239 margin-top: 14px;240 display: flex;241 flex-direction: column;242 gap: 22px;243 }244 .key-row {245 display: flex;246 gap: 18px;247 justify-content: center;248 }249 .key {250 width: 96px;251 height: 120px;252 background: #FFFFFF;253 border-radius: 28px;254 border: 1px solid #E5E9E3;255 box-shadow: 0 1px 0 rgba(0,0,0,0.06);256 display: flex;257 align-items: center;258 justify-content: center;259 font-size: 44px;260 color: #1F1F1F;261 font-weight: 600;262 }263 .key.wide { width: 160px; }264 .key.wider { width: 230px; }265 .key.space { flex: 1; min-width: 360px; }266 .key.icon svg { width: 38px; height: 38px; fill: #222; }267 268 /* Tiny helpers */269 .muted { color: #757575; font-size: 30px; }270</style>271</head>272<body>273<div id="render-target">274 <!-- Top Search Bar -->275 <div class="top-bar">276 <div class="icon-btn" aria-label="Back">277 <svg viewBox="0 0 24 24">278 <path d="M14.5 5l-7 7 7 7 1.5-1.5-5.5-5.5 5.5-5.5z"></path>279 </svg>280 </div>281 <div class="search-input">282 <div class="placeholder">Search for brands & products</div>283 <div class="circle" aria-label="Camera search">284 <svg viewBox="0 0 24 24">285 <path d="M9 4l2-2h2l2 2h3a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h3zm3 4a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z"></path>286 </svg>287 </div>288 </div>289 <div class="profile-wrap">290 <div class="profile-pill">★</div>291 <div class="profile-pill alt">◎</div>292 </div>293 </div>294 295 <!-- Photo Search -->296 <div class="section">297 <div class="title">PHOTO SEARCH</div>298 </div>299 <div class="photo-actions">300 <div class="photo-btn">301 <div class="square-icon">302 <svg viewBox="0 0 24 24">303 <path d="M9 4l2-2h2l2 2h3a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h3zm3 4a5 5 0 100 10 5 5 0 000-10z"></path>304 </svg>305 </div>306 <div>Click a photo</div>307 </div>308 <div class="photo-btn">309 <div class="square-icon">310 <svg viewBox="0 0 24 24">311 <path d="M3 5h18v14H3V5zm2 2v10h14V7H5zm9 2l3 4-9 0 3-4 2 3 1-3z"></path>312 </svg>313 </div>314 <div>Select a photo</div>315 </div>316 </div>317 318 <!-- Recent Searches -->319 <div class="recent-header">320 <div class="title">RECENT SEARCHES</div>321 <div class="edit">EDIT</div>322 </div>323 <div class="recent-row">324 <div class="recent-item">325 <div class="circle-img">[IMG: White Polo T‑shirt]</div>326 <div class="cap">mens tshirt</div>327 </div>328 <div class="recent-item">329 <div class="circle-img">[IMG: Black Track Pants]</div>330 <div class="cap">Track pants</div>331 </div>332 <div class="recent-item">333 <div class="circle-img">[IMG: Plain Sports Tee]</div>334 <div class="cap">Sports<br>Tshirts Men</div>335 </div>336 <div class="recent-item">337 <div class="circle-img">[IMG: Nike Sports Tee]</div>338 <div class="cap">Nike Sports<br>Tshirts Men</div>339 </div>340 <div class="recent-item">341 <div class="circle-img">[IMG: Nike Black Tee]</div>342 <div class="cap">Nike sports<br>tshirt</div>343 </div>344 </div>345 346 <!-- Promo Banner -->347 <div class="promo-banner">[IMG: FLAT ₹400 OFF • First Order + Free Shipping • CODE: MYNTRA400]</div>348 349 <!-- Most searched articles -->350 <div class="articles-head">351 <div class="label">MOST SEARCHED ARTICLES</div>352 <div class="view-btn">View All</div>353 </div>354 355 <!-- Keyboard -->356 <div class="keyboard">357 <div class="kb-actions">358 <div class="kb-circle">359 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>360 </div>361 <div class="kb-circle">😊</div>362 <div class="kb-circle">GIF</div>363 <div class="kb-circle">364 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h4v2h-4v-2zM7 11h10v2H7v-2zm3 4h7v2H10v-2z"/></svg>365 </div>366 <div class="kb-circle">367 <svg viewBox="0 0 24 24"><path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"/></svg>368 </div>369 <div class="kb-circle">370 <svg viewBox="0 0 24 24"><path d="M12 2l4 8h8l-6 6 2 8-8-5-8 5 2-8-6-6h8l4-8z"/></svg>371 </div>372 <div style="flex:1"></div>373 <div class="kb-circle">374 <svg viewBox="0 0 24 24"><path d="M12 3a5 5 0 00-5 5v4a5 5 0 005 5v4h2v-4a5 5 0 005-5V8a5 5 0 00-5-5h-2z"/></svg>375 </div>376 </div>377 378 <div class="keys">379 <div class="key-row">380 <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>381 <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>382 </div>383 <div class="key-row">384 <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>385 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>386 </div>387 <div class="key-row">388 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>389 <div class="key">B</div><div class="key">N</div><div class="key">M</div>390 </div>391 <div class="key-row">392 <div class="key wider">393 <svg viewBox="0 0 24 24"><path d="M4 12l6-6v4h10v4H10v4z"/></svg>394 </div>395 <div class="key wide">?123</div>396 <div class="key">,</div>397 <div class="key">😊</div>398 <div class="key space"></div>399 <div class="key">.</div>400 <div class="key icon">401 <svg viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 00-2 2v14l5-4h11a2 2 0 002-2V5a2 2 0 00-2-2z"/></svg>402 </div>403 <div class="key wide" style="background:#BFE0C2;">404 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.5-1.5z"/></svg>405 </div>406 </div>407 </div>408 </div>409</div>410</body>411</html>