GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 16px;22 left: 24px;23 right: 24px;24 height: 64px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 32px;29 color: #333;30 }31 .status-left {32 display: flex;33 align-items: center;34 gap: 16px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .status-icon { width: 40px; height: 40px; }42 43 /* Search bar */44 .search-wrapper {45 position: absolute;46 top: 96px;47 left: 24px;48 right: 24px;49 }50 .search-bar {51 height: 96px;52 border: 1px solid #DADADA;53 border-radius: 48px;54 display: flex;55 align-items: center;56 padding: 0 24px;57 box-shadow: 0 2px 0 rgba(0,0,0,0.04);58 background: #fff;59 }60 .icon-btn {61 width: 56px;62 height: 56px;63 display: flex;64 align-items: center;65 justify-content: center;66 border-radius: 28px;67 color: #555;68 }69 .search-text {70 flex: 1;71 margin: 0 16px;72 font-size: 32px;73 color: #333;74 white-space: nowrap;75 overflow: hidden;76 text-overflow: ellipsis;77 }78 .round-btn {79 width: 56px;80 height: 56px;81 border-radius: 28px;82 background: #F4F4F4;83 display: flex;84 align-items: center;85 justify-content: center;86 }87 88 /* Results list */89 .results {90 position: absolute;91 top: 216px;92 left: 0;93 right: 0;94 bottom: 880px; /* leaves space for keyboard */95 overflow: hidden;96 }97 .list {98 padding: 0 24px;99 }100 .item {101 display: grid;102 grid-template-columns: 100px 1fr 80px;103 align-items: center;104 column-gap: 24px;105 padding: 28px 0;106 border-bottom: 1px solid #E6E6E6;107 }108 .left-icon-wrap {109 position: relative;110 width: 100px;111 height: 72px;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .distance {117 position: absolute;118 left: 0;119 bottom: -4px;120 font-size: 24px;121 color: #7A7A7A;122 }123 .title {124 font-size: 30px;125 font-weight: 600;126 color: #212121;127 line-height: 1.2;128 }129 .subtitle {130 font-size: 24px;131 color: #757575;132 margin-top: 8px;133 white-space: nowrap;134 overflow: hidden;135 text-overflow: ellipsis;136 }137 .arrow-cell {138 display: flex;139 align-items: center;140 justify-content: center;141 color: #616161;142 }143 144 /* Keyboard */145 .keyboard {146 position: absolute;147 left: 0;148 right: 0;149 bottom: 0;150 height: 880px;151 background: #1f1f1f;152 border-top-left-radius: 24px;153 border-top-right-radius: 24px;154 box-shadow: 0 -6px 16px rgba(0,0,0,0.2);155 }156 .kb-suggestions {157 height: 100px;158 display: flex;159 align-items: center;160 padding: 0 24px;161 gap: 16px;162 color: #eaeaea;163 }164 .kb-chip {165 background: #2b2b2b;166 color: #eaeaea;167 padding: 14px 22px;168 border-radius: 20px;169 font-size: 28px;170 }171 .kb-arrow {172 width: 56px;173 height: 56px;174 background: #89C9FF;175 display: flex;176 align-items: center;177 justify-content: center;178 border-radius: 28px;179 color: #0b3a5c;180 }181 .kb-rows {182 padding: 12px 24px 24px 24px;183 }184 .kb-row {185 display: flex;186 gap: 16px;187 margin-bottom: 20px;188 justify-content: center;189 }190 .key {191 background: #2c2c2c;192 color: #f0f0f0;193 min-width: 88px;194 height: 110px;195 border-radius: 18px;196 display: flex;197 align-items: center;198 justify-content: center;199 font-size: 36px;200 }201 .key.small { min-width: 120px; }202 .key.wide { min-width: 520px; }203 .key.shift { min-width: 120px; }204 .key.action { background: #BFE7FF; color: #0d3a5f; border-radius: 34px; min-width: 120px; }205 206 /* Home indicator */207 .home-indicator {208 position: absolute;209 bottom: 24px;210 left: 50%;211 transform: translateX(-50%);212 width: 320px;213 height: 12px;214 background: #fff;215 border-radius: 6px;216 opacity: 0.9;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div class="status-left">226 <div>4:02</div>227 <svg class="status-icon" viewBox="0 0 48 48">228 <circle cx="18" cy="20" r="8" fill="#FDBA4D"></circle>229 <ellipse cx="30" cy="28" rx="14" ry="8" fill="#B0BEC5"></ellipse>230 </svg>231 </div>232 <div class="status-right">233 <!-- Location icon -->234 <svg class="status-icon" viewBox="0 0 24 24">235 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#666"/>236 </svg>237 <!-- Wi-Fi-ish icon -->238 <svg class="status-icon" viewBox="0 0 24 24">239 <path d="M12 18l2-2-2-2-2 2 2 2zm-6-6a9 9 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2zm-4-4a13 13 0 0 1 20 0l-2 2a10 10 0 0 0-16 0L2 8z" fill="#666"/>240 </svg>241 <!-- Battery icon -->242 <svg class="status-icon" viewBox="0 0 28 20">243 <rect x="1" y="3" width="22" height="14" rx="2" ry="2" fill="#666"></rect>244 <rect x="3" y="5" width="16" height="10" fill="#9ED26C"></rect>245 <rect x="23" y="7" width="4" height="6" rx="1" fill="#666"></rect>246 </svg>247 </div>248 </div>249 250 <!-- Search bar -->251 <div class="search-wrapper">252 <div class="search-bar">253 <div class="icon-btn">254 <svg width="36" height="36" viewBox="0 0 24 24">255 <path d="M15 5l-7 7 7 7" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 <div class="search-text">id, Chandni Chowk, New Delhi, Delhi</div>259 <div class="round-btn">260 <svg width="24" height="24" viewBox="0 0 24 24">261 <path d="M18 6L6 18M6 6l12 12" stroke="#666" stroke-width="2" stroke-linecap="round"/>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Results -->268 <div class="results">269 <div class="list">270 271 <!-- Item 1 -->272 <div class="item">273 <div class="left-icon-wrap">274 <svg width="44" height="44" viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="10" fill="none" stroke="#8E8E8E" stroke-width="2"></circle>276 <path d="M12 7v6l4 2" stroke="#8E8E8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>277 </svg>278 </div>279 <div>280 <div class="title">Jama Masjid, Chandni Chowk</div>281 <div class="subtitle">New Delhi, Central Delhi, Delhi</div>282 </div>283 <div class="arrow-cell">284 <svg width="36" height="36" viewBox="0 0 24 24">285 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>286 </svg>287 </div>288 </div>289 290 <!-- Item 2 -->291 <div class="item">292 <div class="left-icon-wrap">293 <svg width="44" height="44" viewBox="0 0 24 24">294 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>295 </svg>296 <div class="distance">26 km</div>297 </div>298 <div>299 <div class="title">delhi chor bajar</div>300 <div class="subtitle">Meena Bazaar, Jama Masjid, Chandni Chowk</div>301 </div>302 <div class="arrow-cell">303 <svg width="36" height="36" viewBox="0 0 24 24">304 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>305 </svg>306 </div>307 </div>308 309 <!-- Item 3 (bus icon) -->310 <div class="item">311 <div class="left-icon-wrap">312 <svg width="56" height="56" viewBox="0 0 24 24">313 <circle cx="12" cy="12" r="12" fill="#4285F4"></circle>314 <rect x="7" y="8" width="10" height="6" rx="1" fill="#fff"></rect>315 <rect x="8" y="15" width="2" height="2" fill="#fff"></rect>316 <rect x="14" y="15" width="2" height="2" fill="#fff"></rect>317 </svg>318 <div class="distance" style="left:-4px;color:#7A7A7A;">25 km</div>319 </div>320 <div>321 <div class="title">Jama Masjid</div>322 <div class="subtitle">Meena Bazaar, Meena Bazaar, Jama Masjid</div>323 </div>324 <div class="arrow-cell">325 <svg width="36" height="36" viewBox="0 0 24 24">326 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>327 </svg>328 </div>329 </div>330 331 <!-- Item 4 -->332 <div class="item">333 <div class="left-icon-wrap">334 <svg width="44" height="44" viewBox="0 0 24 24">335 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>336 </svg>337 <div class="distance">25 km</div>338 </div>339 <div>340 <div class="title">Delhi Zaika Foods</div>341 <div class="subtitle">Bazar Matia Mahal, Jama Masjid, Chandni Chowk</div>342 </div>343 <div class="arrow-cell">344 <svg width="36" height="36" viewBox="0 0 24 24">345 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>346 </svg>347 </div>348 </div>349 350 <!-- Item 5 -->351 <div class="item">352 <div class="left-icon-wrap">353 <svg width="44" height="44" viewBox="0 0 24 24">354 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>355 </svg>356 <div class="distance">26 km</div>357 </div>358 <div>359 <div class="title">Delhi</div>360 <div class="subtitle">Meena Bazaar, Jama Masjid, Chandni Chowk</div>361 </div>362 <div class="arrow-cell">363 <svg width="36" height="36" viewBox="0 0 24 24">364 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>365 </svg>366 </div>367 </div>368 369 <!-- Item 6 -->370 <div class="item">371 <div class="left-icon-wrap">372 <svg width="44" height="44" viewBox="0 0 24 24">373 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>374 </svg>375 <div class="distance">25 km</div>376 </div>377 <div>378 <div class="title">Delhi Traffic Police Booth</div>379 <div class="subtitle">Meena Bazaar, Jama Masjid, Chandni Chowk</div>380 </div>381 <div class="arrow-cell">382 <svg width="36" height="36" viewBox="0 0 24 24">383 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>384 </svg>385 </div>386 </div>387 388 <!-- Item 7 -->389 <div class="item">390 <div class="left-icon-wrap">391 <svg width="44" height="44" viewBox="0 0 24 24">392 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>393 </svg>394 <div class="distance">26 km</div>395 </div>396 <div>397 <div class="title">Jama Masjid Road</div>398 <div class="subtitle">Meena Bazaar, Hippy Wada, Chandni Chowk</div>399 </div>400 <div class="arrow-cell">401 <svg width="36" height="36" viewBox="0 0 24 24">402 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>403 </svg>404 </div>405 </div>406 407 <!-- Item 8 -->408 <div class="item">409 <div class="left-icon-wrap">410 <svg width="44" height="44" viewBox="0 0 24 24">411 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8E8E8E"></path>412 </svg>413 <div class="distance">25 km</div>414 </div>415 <div>416 <div class="title">Police Station, Jama Masjid</div>417 <div class="subtitle">Meena Bazaar, Jama Masjid, Chandni Chowk</div>418 </div>419 <div class="arrow-cell">420 <svg width="36" height="36" viewBox="0 0 24 24">421 <path d="M7 17L17 7M10 7h7v7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>422 </svg>423 </div>424 </div>425 426 </div>427 </div>428 429 <!-- Keyboard -->430 <div class="keyboard">431 <div class="kb-suggestions">432 <div class="kb-arrow">433 <svg width="26" height="26" viewBox="0 0 24 24">434 <path d="M8 12l6-6v12z" fill="#0b3a5c"></path>435 </svg>436 </div>437 <div class="kb-chip">Delhi</div>438 <div class="kb-chip">Dekhi</div>439 <div class="kb-chip">Dekho</div>440 </div>441 <div class="kb-rows">442 <div class="kb-row">443 <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>444 </div>445 <div class="kb-row">446 <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>447 </div>448 <div class="kb-row">449 <div class="key shift">⇧</div>450 <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>451 <div class="key">452 <svg width="28" height="28" viewBox="0 0 24 24">453 <path d="M6 6l12 12M18 6L6 18" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round"></path>454 </svg>455 </div>456 </div>457 <div class="kb-row">458 <div class="key small">?123</div>459 <div class="key">,</div>460 <div class="key small">461 <svg width="28" height="28" viewBox="0 0 24 24">462 <circle cx="12" cy="8" r="3" fill="#f0f0f0"></circle>463 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#f0f0f0" stroke-width="2" fill="none"></path>464 </svg>465 </div>466 <div class="key wide">space</div>467 <div class="key">.</div>468 <div class="key">469 <svg width="28" height="28" viewBox="0 0 24 24">470 <path d="M18 6l-6 6 6 6" stroke="#f0f0f0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>471 </svg>472 </div>473 <div class="key action">474 <svg width="30" height="30" viewBox="0 0 24 24">475 <circle cx="11" cy="11" r="8" fill="none" stroke="#0d3a5f" stroke-width="2"></circle>476 <path d="M21 21l-3-3" stroke="#0d3a5f" stroke-width="2" stroke-linecap="round"></path>477 </svg>478 </div>479 </div>480 </div>481 </div>482 483 <div class="home-indicator"></div>484</div>485</body>486</html>