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>Search UI - Brussels</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 /* Status bar */17 .statusbar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 color: #202124;27 font-size: 40px;28 }29 .statusbar .right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 30px;34 }35 /* Search area */36 .search-area {37 position: absolute;38 top: 140px;39 left: 40px;40 width: 1000px;41 display: flex;42 align-items: center;43 gap: 20px;44 }45 .close-btn {46 width: 70px;47 height: 70px;48 border-radius: 35px;49 border: 2px solid #8AA1B4;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #6B7E8E;54 cursor: default;55 }56 .search-pill {57 flex: 1;58 height: 120px;59 border: 2.5px solid #2F80FF;60 border-radius: 30px;61 background: #ffffff;62 box-shadow: 0 4px 10px rgba(0,0,0,0.08);63 display: flex;64 align-items: center;65 padding: 0 30px;66 gap: 26px;67 }68 .search-icon {69 width: 36px;70 height: 36px;71 border: 2px solid #2F80FF;72 border-radius: 18px;73 }74 .search-text {75 font-size: 46px;76 color: #1B3A52;77 flex: 1;78 }79 .clear-btn {80 width: 56px;81 height: 56px;82 border-radius: 28px;83 border: 2px solid #8AA1B4;84 display: flex;85 align-items: center;86 justify-content: center;87 color: #6B7E8E;88 }89 /* Suggestions */90 .suggestions {91 position: absolute;92 top: 320px;93 left: 60px;94 width: 960px;95 }96 .suggestion {97 display: flex;98 align-items: flex-start;99 gap: 26px;100 padding: 34px 0;101 border-bottom: 1px solid rgba(0,0,0,0.04);102 }103 .icon {104 width: 52px;105 height: 52px;106 color: #6C88A0;107 }108 .s-title {109 font-size: 44px;110 color: #1B3A52;111 }112 .s-title b { font-weight: 700; }113 .s-sub {114 font-size: 38px;115 color: #6C88A0;116 margin-top: 8px;117 }118 119 /* Keyboard */120 .keyboard {121 position: absolute;122 left: 0;123 bottom: 100px;124 width: 1080px;125 height: 830px;126 background: #1F1A1A;127 box-shadow: 0 -6px 18px rgba(0,0,0,0.25);128 }129 .kb-topbar {130 height: 110px;131 display: flex;132 align-items: center;133 justify-content: space-between;134 padding: 0 34px;135 color: #F1DDCF;136 font-size: 42px;137 }138 .kb-rows {139 padding: 20px 26px 26px;140 display: grid;141 gap: 22px;142 }143 .kb-row { display: flex; gap: 18px; justify-content: center; }144 .key {145 width: 92px;146 height: 112px;147 border-radius: 26px;148 background: #2B2424;149 color: #EAD7C6;150 font-size: 42px;151 display: flex;152 align-items: center;153 justify-content: center;154 }155 .key.wide { width: 140px; }156 .key.xwide { width: 180px; }157 .key.circle {158 width: 110px;159 height: 110px;160 border-radius: 55px;161 background: #F0CFAE;162 color: #2B2424;163 font-weight: 600;164 }165 .gesture-bar {166 position: absolute;167 bottom: 30px;168 left: 50%;169 transform: translateX(-50%);170 width: 220px;171 height: 12px;172 background: #E6E6E6;173 border-radius: 6px;174 }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status bar -->181 <div class="statusbar">182 <div>2:47</div>183 <div class="right">184 <!-- Simple "mail" square icon -->185 <svg width="42" height="42" viewBox="0 0 24 24" class="icon" style="color:#6C88A0;">186 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>187 <path d="M3 7l9 6 9-6" fill="none" stroke="currentColor" stroke-width="2"/>188 </svg>189 <!-- Cast icon -->190 <svg width="42" height="42" viewBox="0 0 24 24" class="icon" style="color:#6C88A0;">191 <path d="M4 6h16a2 2 0 0 1 2 2v8h-3" fill="none" stroke="currentColor" stroke-width="2"/>192 <path d="M2 18h2" stroke="currentColor" stroke-width="2" />193 <path d="M2 14h6" stroke="currentColor" stroke-width="2" />194 <path d="M2 10h10" stroke="currentColor" stroke-width="2" />195 </svg>196 </div>197 </div>198 199 <!-- Search -->200 <div class="search-area">201 <div class="close-btn">202 <svg width="34" height="34" viewBox="0 0 24 24" style="color:#6B7E8E">203 <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>204 </svg>205 </div>206 <div class="search-pill">207 <div class="search-icon"></div>208 <div class="search-text">Brussels</div>209 <div class="clear-btn">210 <svg width="28" height="28" viewBox="0 0 24 24" style="color:#6B7E8E">211 <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>212 </svg>213 </div>214 </div>215 </div>216 217 <!-- Suggestions list -->218 <div class="suggestions">219 <div class="suggestion">220 <!-- Building icon -->221 <svg class="icon" viewBox="0 0 24 24">222 <rect x="4" y="3" width="8" height="18" rx="1" fill="none" stroke="currentColor" stroke-width="2"/>223 <rect x="14" y="8" width="6" height="13" rx="1" fill="none" stroke="currentColor" stroke-width="2"/>224 <path d="M7 7h2M7 11h2M7 15h2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>225 </svg>226 <div>227 <div class="s-title"><b>Brussels</b>, Capital Region of Brussels, Belgium</div>228 </div>229 </div>230 231 <div class="suggestion">232 <!-- Bus icon -->233 <svg class="icon" viewBox="0 0 24 24">234 <rect x="4" y="4" width="16" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>235 <circle cx="8" cy="18" r="2" fill="currentColor"/>236 <circle cx="16" cy="18" r="2" fill="currentColor"/>237 <path d="M6 8h12" stroke="currentColor" stroke-width="2"/>238 </svg>239 <div>240 <div class="s-title">Brussels City Center - Midi Train station</div>241 </div>242 </div>243 244 <div class="suggestion">245 <!-- Pin icon -->246 <svg class="icon" viewBox="0 0 24 24">247 <path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z" fill="none" stroke="currentColor" stroke-width="2"/>248 <circle cx="12" cy="10" r="3" fill="currentColor"/>249 </svg>250 <div>251 <div class="s-title">Brussels Delta</div>252 </div>253 </div>254 255 <div class="suggestion">256 <!-- Pin icon -->257 <svg class="icon" viewBox="0 0 24 24">258 <path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z" fill="none" stroke="currentColor" stroke-width="2"/>259 <circle cx="12" cy="10" r="3" fill="currentColor"/>260 </svg>261 <div>262 <div class="s-title">Brussels Luxemburg</div>263 </div>264 </div>265 266 <div class="suggestion">267 <!-- Pin icon -->268 <svg class="icon" viewBox="0 0 24 24">269 <path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z" fill="none" stroke="currentColor" stroke-width="2"/>270 <circle cx="12" cy="10" r="3" fill="currentColor"/>271 </svg>272 <div>273 <div class="s-title">Brussels Meiser</div>274 </div>275 </div>276 </div>277 278 <!-- Keyboard -->279 <div class="keyboard">280 <div class="kb-topbar">281 <div class="key circle" style="width:94px;height:94px;border-radius:47px;background:#2B2424;color:#EAD7C6;font-weight:500;">282 <svg width="36" height="36" viewBox="0 0 24 24" style="color:#EAD7C6">283 <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>284 <circle cx="9" cy="9" r="1.5" fill="currentColor"/>285 <circle cx="15" cy="9" r="1.5" fill="currentColor"/>286 <circle cx="9" cy="15" r="1.5" fill="currentColor"/>287 <circle cx="15" cy="15" r="1.5" fill="currentColor"/>288 </svg>289 </div>290 <div>Brussels</div>291 <div class="key circle">292 <svg width="30" height="30" viewBox="0 0 24 24" style="color:#2B2424">293 <path d="M12 5a5 5 0 0 0-5 5v3a5 5 0 0 0 10 0V10a5 5 0 0 0-5-5z" fill="none" stroke="currentColor" stroke-width="2"/>294 <path d="M19 19l-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>295 </svg>296 </div>297 </div>298 <div class="kb-rows">299 <div class="kb-row">300 <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>301 <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>302 </div>303 <div class="kb-row">304 <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>305 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>306 </div>307 <div class="kb-row">308 <div class="key wide">⇧</div>309 <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>310 <div class="key">n</div><div class="key">m</div>311 <div class="key wide">312 <svg width="28" height="28" viewBox="0 0 24 24" style="color:#EAD7C6">313 <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 </div>316 </div>317 <div class="kb-row">318 <div class="key circle">?123</div>319 <div class="key xwide">,</div>320 <div class="key xwide">🙂</div>321 <div class="key" style="flex:1; min-width:420px;">space</div>322 <div class="key xwide">.</div>323 <div class="key circle">✓</div>324 </div>325 </div>326 </div>327 328 <!-- Android gesture bar -->329 <div class="gesture-bar"></div>330</div>331</body>332</html>