GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EAEAEA;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0; right: 0;20 height: 90px;21 padding: 0 24px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #f5f5f5;26 font-size: 40px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 24px;32 }33 .status-dot { width: 8px; height: 8px; background: #BDBDBD; border-radius: 50%; display: inline-block; margin: 0 8px; }34 35 /* Search header area */36 .search-area {37 position: absolute;38 top: 92px; left: 0; right: 0;39 padding: 24px;40 }41 .search-row {42 display: flex;43 align-items: center;44 gap: 18px;45 }46 .icon-circle {47 width: 72px; height: 72px;48 border-radius: 36px;49 background: #1f1f1f;50 border: 1px solid #2c2c2c;51 display: flex; align-items: center; justify-content: center;52 }53 .search-pill {54 flex: 1;55 height: 110px;56 border-radius: 55px;57 background: #1f1f1f;58 border: 1px solid #2c2c2c;59 display: flex; align-items: center; justify-content: space-between;60 padding: 0 28px;61 box-sizing: border-box;62 }63 .search-placeholder {64 color: #BDBDBD;65 font-size: 44px;66 }67 68 /* Quick chips */69 .chips-row {70 margin-top: 28px;71 display: flex;72 align-items: stretch;73 gap: 28px;74 }75 .chip {76 flex: 0 0 300px;77 background: #1f1f1f;78 border: 1px solid #2c2c2c;79 border-radius: 28px;80 padding: 24px;81 display: flex;82 flex-direction: column;83 gap: 10px;84 }85 .chip-title { font-size: 46px; font-weight: 600; }86 .chip-sub { font-size: 34px; color: #9E9E9E; }87 .chip .icon-circle { width: 66px; height: 66px; border-radius: 33px; }88 89 .more-chip {90 flex: 0 0 180px;91 display: flex; align-items: center; justify-content: center;92 gap: 18px;93 padding: 20px 24px;94 }95 .more-chip .chip-title { font-size: 44px; }96 97 /* Recent section */98 .recent-header {99 margin-top: 36px;100 padding: 0 8px;101 display: flex; align-items: center; justify-content: space-between;102 }103 .recent-header span { font-size: 40px; color: #E0E0E0; }104 .list {105 margin-top: 12px;106 background: transparent;107 }108 .list-item {109 padding: 30px 0;110 border-bottom: 1px solid #2b2b2b;111 display: flex;112 gap: 28px;113 }114 .list-content {115 flex: 1;116 }117 .list-title {118 font-size: 54px;119 font-weight: 700;120 line-height: 1.3;121 }122 .list-sub {123 font-size: 38px;124 color: #9E9E9E;125 margin-top: 8px;126 white-space: nowrap;127 overflow: hidden;128 text-overflow: ellipsis;129 }130 .open-row {131 margin-top: 10px;132 font-size: 38px;133 }134 .open-row .open { color: #4CAF50; }135 136 /* Keyboard */137 .keyboard {138 position: absolute;139 left: 0; right: 0;140 bottom: 90px;141 height: 780px;142 background: #0f0f0f;143 border-top: 1px solid #1f1f1f;144 box-sizing: border-box;145 padding: 16px 24px 24px 24px;146 }147 148 .kbd-top {149 height: 90px;150 display: flex; align-items: center;151 gap: 28px;152 }153 .kbd-top .top-chip {154 height: 70px; padding: 0 22px; border-radius: 20px;155 background: #1c1c1c; border: 1px solid #2a2a2a; color: #dcdcdc;156 display: flex; align-items: center; gap: 14px; font-size: 34px;157 }158 159 .keys { margin-top: 16px; }160 .row {161 display: flex; justify-content: center; gap: 12px;162 margin: 16px 0;163 }164 .key {165 width: 92px; height: 120px;166 border-radius: 18px;167 background: #1c1c1c;168 border: 1px solid #2a2a2a;169 color: #EAEAEA;170 font-size: 44px;171 display: flex; align-items: center; justify-content: center;172 }173 .key.wide { width: 140px; }174 .key.extra-wide { width: 560px; }175 .key.round { width: 120px; height: 120px; border-radius: 60px; }176 .key.green {177 background: #B8F9C2;178 color: #0c3a13;179 border-color: #9bd5a4;180 }181 182 /* Bottom handle */183 .handle {184 position: absolute;185 bottom: 22px; left: 50%;186 transform: translateX(-50%);187 width: 600px; height: 10px;188 background: #E0E0E0; border-radius: 5px; opacity: 0.7;189 }190 191 /* Simple SVG styles */192 svg { width: 40px; height: 40px; }193 .icon-light path, .icon-light circle { fill: #EAEAEA; stroke: none; }194 .icon-muted path, .icon-muted circle { fill: #BDBDBD; }195 .icon-green path, .icon-green circle { fill: #0c3a13; }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Status Bar -->202 <div class="status-bar">203 <div>1:50</div>204 <div class="status-icons">205 <!-- tiny icons approximations -->206 <svg class="icon-light" viewBox="0 0 24 24">207 <path d="M4 10h16v8H4z"></path>208 <path d="M8 6h8v2H8z"></path>209 </svg>210 <svg class="icon-light" viewBox="0 0 24 24">211 <path d="M3 12a9 9 0 1 0 18 0A9 9 0 0 0 3 12zm3 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0z"></path>212 </svg>213 <span class="status-dot"></span>214 <svg class="icon-light" viewBox="0 0 24 24">215 <path d="M20 6v12H4V6h16zm-3 1H7v10h10V7z"></path>216 </svg>217 <svg class="icon-light" viewBox="0 0 24 24">218 <path d="M18 2H6v2h12V2zM4 6h16v14H4z"></path>219 </svg>220 </div>221 </div>222 223 <!-- Search Area -->224 <div class="search-area">225 <div class="search-row">226 <div class="icon-circle">227 <!-- Back Arrow -->228 <svg class="icon-light" viewBox="0 0 24 24">229 <path d="M14 7l-5 5 5 5v-3H21v-4h-7V7z"></path>230 </svg>231 </div>232 <div class="search-pill">233 <div class="search-placeholder">Search here</div>234 <div>235 <!-- Mic icon -->236 <svg class="icon-muted" viewBox="0 0 24 24">237 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z"></path>238 <path d="M7 11h2a3 3 0 0 0 6 0h2c0 3.2-2.5 5.8-5.5 6v3h-1v-3C9.5 16.8 7 14.2 7 11z"></path>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Chips -->245 <div class="chips-row">246 <div class="chip">247 <div class="icon-circle">248 <!-- Home icon -->249 <svg class="icon-light" viewBox="0 0 24 24">250 <path d="M12 3l9 7h-3v9H6V10H3l9-7z"></path>251 </svg>252 </div>253 <div class="chip-title">Home</div>254 <div class="chip-sub">Set location</div>255 </div>256 257 <div class="chip">258 <div class="icon-circle">259 <!-- Work/briefcase -->260 <svg class="icon-light" viewBox="0 0 24 24">261 <path d="M9 4h6v3h5v13H4V7h5V4zm1 3h4V6h-4v1z"></path>262 </svg>263 </div>264 <div class="chip-title">Work</div>265 <div class="chip-sub">Set location</div>266 </div>267 268 <div class="chip more-chip">269 <div class="icon-circle">270 <!-- More / overflow -->271 <svg class="icon-light" viewBox="0 0 24 24">272 <circle cx="5" cy="12" r="2"></circle>273 <circle cx="12" cy="12" r="2"></circle>274 <circle cx="19" cy="12" r="2"></circle>275 </svg>276 </div>277 <div class="chip-title">More</div>278 </div>279 </div>280 281 <!-- Recent header -->282 <div class="recent-header">283 <span>Recent</span>284 <div class="icon-circle" style="width:56px;height:56px;border-radius:28px;">285 <svg class="icon-light" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="10" fill="#1f1f1f"></circle>287 <path d="M12 6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-1 5h2v7h-2z" fill="#EAEAEA"></path>288 </svg>289 </div>290 </div>291 292 <!-- Recent list -->293 <div class="list">294 295 <div class="list-item">296 <div class="icon-circle">297 <!-- Clock -->298 <svg class="icon-muted" viewBox="0 0 24 24">299 <circle cx="12" cy="12" r="9"></circle>300 <path d="M12 7v5l4 2" fill="none" stroke="#BDBDBD" stroke-width="2"></path>301 </svg>302 </div>303 <div class="list-content">304 <div class="list-title">Pullman New Delhi Aerocity</div>305 <div class="list-sub">Asset No 02, Gmr Hospitality District, IGI Road, ...</div>306 </div>307 </div>308 309 <div class="list-item">310 <div class="icon-circle">311 <svg class="icon-muted" viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="9"></circle>313 <path d="M12 7v5l4 2" fill="none" stroke="#BDBDBD" stroke-width="2"></path>314 </svg>315 </div>316 <div class="list-content">317 <div class="list-title">Oracle</div>318 <div class="list-sub">One Horizon Center, Golf Course Road, Harizan...</div>319 </div>320 </div>321 322 <div class="list-item">323 <div class="icon-circle">324 <svg class="icon-muted" viewBox="0 0 24 24">325 <circle cx="12" cy="12" r="9"></circle>326 <path d="M12 7v5l4 2" fill="none" stroke="#BDBDBD" stroke-width="2"></path>327 </svg>328 </div>329 <div class="list-content">330 <div class="list-title">Hauz Khas</div>331 <div class="list-sub">New Delhi, Delhi</div>332 </div>333 </div>334 335 <div class="list-item">336 <div class="icon-circle">337 <svg class="icon-muted" viewBox="0 0 24 24">338 <circle cx="12" cy="12" r="9"></circle>339 <path d="M12 7v5l4 2" fill="none" stroke="#BDBDBD" stroke-width="2"></path>340 </svg>341 </div>342 <div class="list-content">343 <div class="list-title">Hospital Marg, Delhi</div>344 </div>345 </div>346 347 <div class="list-item" style="border-bottom:none;">348 <div class="icon-circle">349 <svg class="icon-muted" viewBox="0 0 24 24">350 <circle cx="12" cy="12" r="9"></circle>351 <path d="M12 7v5l4 2" fill="none" stroke="#BDBDBD" stroke-width="2"></path>352 </svg>353 </div>354 <div class="list-content">355 <div class="list-title">Lotus Temple</div>356 <div class="list-sub">Shambhu Dayal Bagh, Kalkaji, New Delhi, Delhi</div>357 <div class="open-row"><span class="open">Open</span> · Closes 6:00 PM</div>358 </div>359 </div>360 361 </div>362 </div>363 364 <!-- Keyboard -->365 <div class="keyboard">366 <div class="kbd-top">367 <div class="top-chip">368 <div class="icon-circle" style="width:46px;height:46px;border-radius:23px;background:#151515;">369 <svg class="icon-muted" viewBox="0 0 24 24">370 <path d="M14 7l-5 5 5 5v-3h6v-4h-6V7z"></path>371 </svg>372 </div>373 </div>374 <div class="top-chip">375 <svg class="icon-muted" viewBox="0 0 24 24">376 <circle cx="12" cy="8" r="3"></circle>377 <path d="M5 21c0-4 3-7 7-7s7 3 7 7H5z"></path>378 </svg>379 <span>Stickers</span>380 </div>381 <div class="top-chip">GIF</div>382 <div class="top-chip">383 <svg class="icon-muted" viewBox="0 0 24 24">384 <path d="M12 6l4 4h-3v8h-2v-8H8l4-4z"></path>385 </svg>386 <span>Settings</span>387 </div>388 <div class="top-chip">Gx</div>389 <div class="top-chip">⋮</div>390 <div class="top-chip">391 <svg class="icon-muted" viewBox="0 0 24 24">392 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z"></path>393 <path d="M7 11h2a3 3 0 0 0 6 0h2c0 3.2-2.5 5.8-5.5 6v3h-1v-3C9.5 16.8 7 14.2 7 11z"></path>394 </svg>395 <span>Mic</span>396 </div>397 </div>398 399 <div class="keys">400 <div class="row">401 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>402 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>403 <div class="key">o</div><div class="key">p</div>404 </div>405 <div class="row">406 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>407 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>408 <div class="key">l</div>409 </div>410 <div class="row">411 <div class="key wide">shift</div>412 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>413 <div class="key">b</div><div class="key">n</div><div class="key">m</div>414 <div class="key wide">415 <!-- Backspace icon -->416 <svg class="icon-light" viewBox="0 0 24 24">417 <path d="M6 7l-4 5 4 5h14V7H6zm8 3l3 3-3 3-1.5-1.5L13 13l-2.5 2.5L9 14l3-3-3-3 1.5-1.5L13 11l1.5-1.5L14 10z"></path>418 </svg>419 </div>420 </div>421 <div class="row">422 <div class="key wide">?123</div>423 <div class="key">,</div>424 <div class="key wide">🙂</div>425 <div class="key extra-wide"></div>426 <div class="key">.</div>427 <div class="key round green">428 <!-- Search icon -->429 <svg class="icon-green" viewBox="0 0 24 24">430 <path d="M10 3a7 7 0 1 0 4.9 12L21 21l-2 2-6.1-6.1A7 7 0 0 0 10 3z"></path>431 </svg>432 </div>433 </div>434 </div>435 </div>436 437 <div class="handle"></div>438</div>439</body>440</html>