GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>IndiGo Destination Search 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 border-radius: 0;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #222;29 font-size: 36px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon-wifi, .icon-battery {37 width: 44px; height: 44px;38 }39 40 /* App header with logo and close */41 .header {42 position: absolute;43 top: 110px;44 left: 0;45 width: 1080px;46 height: 140px;47 display: flex;48 align-items: center;49 justify-content: center;50 box-sizing: border-box;51 border-bottom: 1px solid #eee;52 }53 .header .close-left {54 position: absolute;55 left: 40px;56 top: 40px;57 width: 56px; height: 56px;58 display: flex; align-items: center; justify-content: center;59 border-radius: 28px;60 color: #333;61 }62 .header .logo {63 font-size: 64px;64 font-weight: 700;65 color: #1a2e91;66 letter-spacing: 1px;67 }68 .header .logo small {69 font-size: 44px;70 margin-left: 10px;71 }72 73 /* Title row */74 .title-row {75 position: absolute;76 top: 250px;77 left: 0;78 width: 1080px;79 height: 110px;80 padding: 0 120px 0 54px;81 box-sizing: border-box;82 display: flex;83 align-items: center;84 justify-content: space-between;85 font-size: 48px;86 color: #222;87 border-bottom: 1px solid #eee;88 }89 .title-row .close-right {90 width: 60px; height: 60px;91 display: flex; align-items: center; justify-content: center;92 color: #888;93 }94 95 /* Search bar */96 .search-bar {97 position: absolute;98 top: 370px;99 left: 0;100 width: 1080px;101 height: 120px;102 padding: 0 36px;103 box-sizing: border-box;104 display: flex;105 align-items: center;106 gap: 22px;107 font-size: 52px;108 color: #222;109 border-bottom: 10px solid #f2f2f2;110 }111 .search-bar .magnifier {112 width: 52px; height: 52px; color: #666;113 }114 .search-text {115 flex: 1;116 }117 .clear-btn {118 font-size: 44px;119 color: #1976d2;120 }121 122 /* Blue drop cursor indicator */123 .blue-drop {124 position: absolute;125 top: 410px; /* roughly under the typed text */126 left: 250px;127 width: 44px;128 height: 44px;129 background: #3f7ce6;130 border-radius: 50%;131 box-shadow: 0 18px 0 8px #3f7ce6;132 transform: translateY(6px);133 }134 135 /* Results list */136 .results {137 position: absolute;138 top: 500px;139 left: 0;140 width: 1080px;141 box-sizing: border-box;142 }143 .result {144 display: flex;145 align-items: center;146 padding: 28px 36px;147 gap: 28px;148 border-bottom: 1px solid #ededed;149 }150 .thumb {151 width: 110px;152 height: 110px;153 background: #E0E0E0;154 border: 1px solid #BDBDBD;155 border-radius: 55px;156 display: flex; align-items: center; justify-content: center;157 color: #757575;158 font-size: 22px;159 }160 .result .texts {161 display: flex;162 flex-direction: column;163 }164 .result .title {165 font-size: 50px;166 font-weight: 700;167 color: #222;168 line-height: 1.1;169 margin-bottom: 10px;170 }171 .result .subtitle {172 font-size: 40px;173 color: #8a8a8a;174 }175 176 /* Keyboard */177 .keyboard {178 position: absolute;179 bottom: 0;180 left: 0;181 width: 1080px;182 height: 880px;183 background: #1f1b19;184 padding: 36px;185 box-sizing: border-box;186 }187 .kb-top-info {188 position: absolute;189 top: -60px;190 left: 36px;191 font-size: 42px;192 color: #333;193 }194 .kb-row {195 display: grid;196 grid-template-columns: repeat(10, 1fr);197 gap: 20px;198 margin-bottom: 30px;199 }200 .kb-row.row2 { grid-template-columns: repeat(9, 1fr); }201 .kb-row.row3 { grid-template-columns: repeat(8, 1fr); }202 .key {203 height: 120px;204 background: #2a2523;205 border-radius: 22px;206 color: #e9ddd6;207 font-size: 46px;208 display: flex; align-items: center; justify-content: center;209 }210 .key.wide { grid-column: span 4; }211 .key.space { grid-column: span 6; }212 .key.circle {213 height: 120px;214 border-radius: 60px;215 background: #f5d7c1;216 color: #333;217 }218 .kb-bottom {219 display: grid;220 grid-template-columns: 1.6fr 1fr 5fr 1fr 1.5fr;221 gap: 20px;222 }223 .emoji-key { font-size: 54px; }224 .backspace-key {225 display: flex;226 align-items: center;227 justify-content: center;228 gap: 10px;229 }230 .mic {231 position: absolute;232 right: 160px;233 top: 360px;234 width: 88px; height: 88px;235 border-radius: 44px;236 background: #2a2523;237 display: flex; align-items: center; justify-content: center;238 color: #e9ddd6;239 font-size: 42px;240 border: 1px solid #3a3330;241 }242 243 /* Simple icons */244 .icon-x svg { width: 48px; height: 48px; }245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status bar -->251 <div class="status-bar">252 <div class="time">3:05</div>253 <div class="status-right">254 <!-- WiFi icon -->255 <svg class="icon-wifi" viewBox="0 0 24 24">256 <path fill="#444" d="M12 18.5c-.9 0-1.7.4-2.2 1l2.2 2.5 2.2-2.5c-.5-.6-1.3-1-2.2-1zm0-4.7c-2 0-3.9.8-5.3 2.2l1.4 1.4C9 16.3 10.5 15.7 12 15.7s3 .6 4.2 1.7l1.4-1.4C15.9 14.6 14 13.8 12 13.8zm0-4.8c-3.6 0-6.9 1.4-9.4 3.9l1.4 1.4C6.1 10.9 8.9 9.8 12 9.8s5.9 1.1 8 3l1.4-1.4c-2.5-2.4-5.8-3.9-9.4-3.9z"/>257 </svg>258 <!-- Battery icon -->259 <svg class="icon-battery" viewBox="0 0 24 24">260 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#444"></rect>261 <rect x="4" y="8" width="12" height="8" fill="#8bc34a"></rect>262 <rect x="20" y="9" width="2" height="6" fill="#444"></rect>263 </svg>264 </div>265 </div>266 267 <!-- App header -->268 <div class="header">269 <div class="close-left icon-x">270 <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z" fill="#333"/></svg>271 </div>272 <div class="logo">IndiGo <small>✈️</small></div>273 </div>274 275 <!-- Title row -->276 <div class="title-row">277 <div>Enter destination</div>278 <div class="close-right icon-x">279 <svg viewBox="0 0 24 24"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z" fill="#888"/></svg>280 </div>281 </div>282 283 <!-- Search bar -->284 <div class="search-bar">285 <svg class="magnifier" viewBox="0 0 24 24">286 <path fill="#666" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>287 </svg>288 <div class="search-text">Lonavala</div>289 <div class="clear-btn">Clear</div>290 </div>291 <div class="blue-drop"></div>292 293 <!-- Results list -->294 <div class="results">295 <div class="result">296 <div class="thumb">IMG</div>297 <div class="texts">298 <div class="title">Lonavala</div>299 <div class="subtitle">Maharashtra, India</div>300 </div>301 </div>302 303 <div class="result">304 <div class="thumb">IMG</div>305 <div class="texts">306 <div class="title">Mumbai</div>307 <div class="subtitle">Maharashtra, India</div>308 </div>309 </div>310 311 <div class="result">312 <div class="thumb">IMG</div>313 <div class="texts">314 <div class="title">Fariyas Resort Lonavala</div>315 <div class="subtitle">Lonavala, Maharashtra, India</div>316 </div>317 </div>318 319 <div class="result">320 <div class="thumb">IMG</div>321 <div class="texts">322 <div class="title">Zostel Plus Lonavala</div>323 <div class="subtitle">Lonavala, Maharashtra, India</div>324 </div>325 </div>326 327 <div class="result">328 <div class="thumb">IMG</div>329 <div class="texts">330 <div class="title">Mahabaleshwar</div>331 <div class="subtitle">Maharashtra, India</div>332 </div>333 </div>334 </div>335 336 <!-- Keyboard -->337 <div class="keyboard">338 <!-- Letters rows -->339 <div class="kb-row">340 <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>341 </div>342 <div class="kb-row row2">343 <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>344 </div>345 <div class="kb-row row3">346 <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>347 <div class="key backspace-key">⌫</div>348 </div>349 <div class="kb-bottom">350 <div class="key">?123</div>351 <div class="key emoji-key">☺</div>352 <div class="key space"></div>353 <div class="key">.</div>354 <div class="key circle">355 <svg viewBox="0 0 24 24" style="width:46px;height:46px;">356 <path fill="#333" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>357 </svg>358 </div>359 </div>360 <div class="mic">🕪</div>361 </div>362 363</div>364</body>365</html>