GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Destination Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #20262B;25 color: #EAEAEA;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 38px;31 letter-spacing: 1px;32 }33 .status-left { flex: 1; }34 .status-right { display: flex; align-items: center; gap: 22px; }35 .status-icon {36 width: 30px; height: 30px; opacity: 0.85;37 }38 39 /* Search bar */40 .search-bar {41 position: absolute;42 top: 110px;43 left: 0;44 width: 1080px;45 height: 140px;46 background: #FFFFFF;47 border-bottom: 1px solid #E5E7EA;48 display: flex;49 align-items: center;50 padding: 0 30px;51 box-sizing: border-box;52 }53 .icon-btn {54 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;55 }56 .search-input {57 flex: 1;58 font-size: 48px;59 color: #9AA4AE;60 margin-left: 10px;61 }62 63 /* Content area */64 .content {65 position: absolute;66 top: 250px;67 left: 0;68 right: 0;69 bottom: 920px; /* leave room for keyboard */70 padding: 30px 36px 0 36px;71 box-sizing: border-box;72 overflow: hidden;73 background: #FFFFFF;74 }75 76 .list-item {77 display: flex;78 align-items: flex-start;79 gap: 28px;80 padding: 36px 0;81 }82 .list-title {83 font-size: 44px;84 color: #0F1B2B;85 }86 .subtitle {87 font-size: 34px;88 color: #6B7785;89 margin-top: 6px;90 }91 .section-label {92 font-size: 36px;93 color: #6B7785;94 margin-top: 30px;95 margin-bottom: 16px;96 display: flex;97 align-items: center;98 }99 .clear-link {100 margin-left: auto;101 color: #1976D2;102 font-weight: 500;103 }104 .divider {105 height: 2px;106 background: #E8ECEF;107 margin: 18px 0 6px 0;108 }109 110 .loc-icon, .building-icon {111 width: 56px; height: 56px; flex: 0 0 56px;112 margin-top: 10px;113 }114 .building-icon {115 margin-top: 6px;116 }117 118 /* Keyboard */119 .keyboard {120 position: absolute;121 left: 0;122 bottom: 40px;123 width: 1080px;124 height: 860px;125 background: #EEF1E6;126 border-top: 1px solid #D8DECC;127 box-sizing: border-box;128 padding: 18px 18px 22px 18px;129 display: flex;130 flex-direction: column;131 gap: 18px;132 }133 .kb-tools {134 display: flex;135 justify-content: space-between;136 padding: 6px 30px 10px 30px;137 color: #3A444B;138 font-size: 28px;139 align-items: center;140 }141 .tool {142 width: 100px; height: 72px; display: flex; align-items: center; justify-content: center;143 color: #2F3A40;144 }145 .kb-row {146 display: flex;147 justify-content: center;148 gap: 14px;149 padding: 0 18px;150 }151 .key {152 background: #FFFFFF;153 border: 1px solid #D7DCE0;154 width: 88px;155 height: 120px;156 border-radius: 22px;157 display: flex;158 align-items: center;159 justify-content: center;160 font-size: 44px;161 color: #1D2A33;162 box-sizing: border-box;163 }164 .key.wide { width: 140px; }165 .key.shift, .key.fn, .key.backspace, .key.enter, .key.comma, .key.dot {166 background: #D9E8D0;167 border-color: #C3D7B9;168 }169 .spacebar {170 flex: 1;171 background: #FFFFFF;172 border: 1px solid #D7DCE0;173 height: 120px;174 border-radius: 22px;175 }176 .kb-row.bottom { padding: 0 24px; }177 178 /* Home indicator (gesture bar) */179 .home-indicator {180 position: absolute;181 bottom: 10px;182 left: 50%;183 transform: translateX(-50%);184 width: 260px;185 height: 12px;186 background: #A7ADB3;187 border-radius: 6px;188 opacity: 0.7;189 }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="status-bar">197 <div class="status-left">5:58</div>198 <div class="status-right">199 <!-- small placeholder status icons -->200 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#BFC6CC"/></svg>201 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#E0E4E7"/></svg>202 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12l7-9v6h11l-7 9v-6z" fill="#D0D6DB"/></svg>203 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#D0D6DB"/><circle cx="12" cy="6" r="2" fill="#D0D6DB"/><circle cx="12" cy="18" r="2" fill="#D0D6DB"/></svg>204 <!-- Battery -->205 <svg class="status-icon" viewBox="0 0 32 18">206 <rect x="2" y="3" width="24" height="12" rx="2" ry="2" fill="none" stroke="#E6EAEE" stroke-width="2"/>207 <rect x="4" y="5" width="16" height="8" rx="1" fill="#E6EAEE"/>208 <rect x="26" y="6" width="3" height="6" rx="1" fill="#E6EAEE"/>209 </svg>210 </div>211 </div>212 213 <!-- Search bar -->214 <div class="search-bar">215 <div class="icon-btn">216 <!-- X icon -->217 <svg width="42" height="42" viewBox="0 0 24 24">218 <path d="M6 6l12 12M18 6L6 18" stroke="#7D8994" stroke-width="2" stroke-linecap="round"/>219 </svg>220 </div>221 <div class="search-input">Destination</div>222 </div>223 224 <!-- Content -->225 <div class="content">226 <div class="list-item">227 <svg class="loc-icon" viewBox="0 0 24 24">228 <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" fill="#2D3B46"/>229 </svg>230 <div class="list-title">Current location</div>231 </div>232 233 <div class="section-label">234 Recent locations235 <div class="clear-link">Clear</div>236 </div>237 <div class="divider"></div>238 239 <div class="list-item" style="padding-top: 28px;">240 <svg class="building-icon" viewBox="0 0 24 24">241 <rect x="3" y="3" width="8" height="18" fill="#2E3A44"/>242 <rect x="13" y="9" width="8" height="12" fill="#2E3A44"/>243 <rect x="5" y="6" width="3" height="3" fill="#FFFFFF"/>244 <rect x="5" y="11" width="3" height="3" fill="#FFFFFF"/>245 <rect x="15" y="12" width="3" height="3" fill="#FFFFFF"/>246 </svg>247 <div>248 <div class="list-title" style="font-weight: 700;">Seattle, Washington, United States</div>249 <div class="subtitle">United States</div>250 </div>251 </div>252 </div>253 254 <!-- Keyboard -->255 <div class="keyboard">256 <!-- Tool row -->257 <div class="kb-tools">258 <div class="tool">259 <svg width="56" height="56" viewBox="0 0 24 24">260 <circle cx="12" cy="12" r="10" fill="#A5C999"/>261 <rect x="6" y="6" width="12" height="12" rx="2" fill="#FFFFFF"/>262 </svg>263 </div>264 <div class="tool">265 <svg width="56" height="56" viewBox="0 0 24 24">266 <circle cx="12" cy="12" r="9" fill="none" stroke="#394147" stroke-width="2"/>267 <circle cx="9" cy="10" r="1.6" fill="#394147"/>268 <circle cx="15" cy="10" r="1.6" fill="#394147"/>269 <path d="M8 14c1.5 1.5 6.5 1.5 8 0" stroke="#394147" stroke-width="2" stroke-linecap="round"/>270 </svg>271 </div>272 <div class="tool" style="font-weight:700;">GIF</div>273 <div class="tool">274 <svg width="56" height="56" viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="10" fill="none" stroke="#394147" stroke-width="2"/>276 <path d="M8 13h4M12 13l4-6" stroke="#394147" stroke-width="2" stroke-linecap="round"/>277 </svg>278 </div>279 <div class="tool">280 <svg width="56" height="56" viewBox="0 0 24 24">281 <circle cx="12" cy="12" r="10" fill="none" stroke="#394147" stroke-width="2"/>282 <circle cx="9" cy="9" r="2" fill="#394147"/>283 <circle cx="15" cy="15" r="2" fill="#394147"/>284 </svg>285 </div>286 <div class="tool">287 <svg width="56" height="56" viewBox="0 0 24 24">288 <circle cx="12" cy="12" r="10" fill="#D9E8D0"/>289 <path d="M8 15l3-3 3 3" stroke="#2E3A44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 </div>292 </div>293 294 <!-- Row 1 -->295 <div class="kb-row">296 <div class="key">q</div>297 <div class="key">w</div>298 <div class="key">e</div>299 <div class="key">r</div>300 <div class="key">t</div>301 <div class="key">y</div>302 <div class="key">u</div>303 <div class="key">i</div>304 <div class="key">o</div>305 <div class="key">p</div>306 </div>307 308 <!-- Row 2 -->309 <div class="kb-row">310 <div class="key">a</div>311 <div class="key">s</div>312 <div class="key">d</div>313 <div class="key">f</div>314 <div class="key">g</div>315 <div class="key">h</div>316 <div class="key">j</div>317 <div class="key">k</div>318 <div class="key">l</div>319 </div>320 321 <!-- Row 3 -->322 <div class="kb-row">323 <div class="key shift wide">324 <svg width="38" height="38" viewBox="0 0 24 24">325 <path d="M12 4l6 6h-4v8H10v-8H6z" fill="#2E3A44"/>326 </svg>327 </div>328 <div class="key">z</div>329 <div class="key">x</div>330 <div class="key">c</div>331 <div class="key">v</div>332 <div class="key">b</div>333 <div class="key">n</div>334 <div class="key">m</div>335 <div class="key backspace wide">336 <svg width="44" height="44" viewBox="0 0 24 24">337 <path d="M3 12l6-6h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9z" fill="#2E3A44"/>338 <path d="M12 10l4 4M16 10l-4 4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>339 </svg>340 </div>341 </div>342 343 <!-- Bottom row -->344 <div class="kb-row bottom" style="gap: 16px;">345 <div class="key fn wide">?123</div>346 <div class="key comma">,</div>347 <div class="key" title="emoji">348 <svg width="36" height="36" viewBox="0 0 24 24">349 <circle cx="12" cy="12" r="9" fill="none" stroke="#2E3A44" stroke-width="2"/>350 <circle cx="9" cy="10" r="1.4" fill="#2E3A44"/>351 <circle cx="15" cy="10" r="1.4" fill="#2E3A44"/>352 <path d="M8 14c1.2 1.2 6.8 1.2 8 0" stroke="#2E3A44" stroke-width="2" stroke-linecap="round"/>353 </svg>354 </div>355 <div class="spacebar"></div>356 <div class="key dot">.</div>357 <div class="key enter wide" style="display:flex; align-items:center; justify-content:center;">358 <svg width="42" height="42" viewBox="0 0 24 24">359 <circle cx="12" cy="12" r="10" fill="#8FCB87"/>360 <path d="M7 12l3 3 7-7" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>361 </svg>362 </div>363 </div>364 </div>365 366 <!-- Home indicator -->367 <div class="home-indicator"></div>368</div>369</body>370</html>