GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search with Keyboard</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #000;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 padding: 0 28px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-left, .status-right {33 display: flex;34 align-items: center;35 gap: 18px;36 }37 .dot {38 width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0.85;39 }40 .wifi {41 width: 34px; height: 26px; border: 3px solid #fff; border-top-left-radius: 22px; border-top-right-radius: 22px; border-bottom: none; position: relative;42 }43 .battery {44 width: 54px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;45 }46 .battery::after {47 content: "";48 position: absolute; right: -10px; top: 8px; width: 8px; height: 10px; background: #fff; border-radius: 2px;49 }50 51 /* Search header */52 .search-header {53 position: absolute;54 top: 96px;55 left: 0;56 width: 1080px;57 padding: 24px 24px 12px 24px;58 box-sizing: border-box;59 }60 .search-row {61 display: flex;62 align-items: center;63 gap: 24px;64 }65 .icon-btn {66 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;67 }68 .search-pill {69 flex: 1;70 height: 96px;71 border-radius: 48px;72 background: #1e1e1e;73 display: flex;74 align-items: center;75 padding: 0 28px;76 box-sizing: border-box;77 color: #fff;78 font-size: 36px;79 }80 .pill-text {81 flex: 1;82 opacity: 0.95;83 }84 .pill-x {85 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;86 }87 88 /* Suggestion item */89 .suggestion {90 margin-top: 22px;91 display: flex;92 align-items: center;93 justify-content: space-between;94 padding: 18px 12px 18px 8px;95 color: #cfcfcf;96 font-size: 40px;97 }98 .suggest-left {99 display: flex; align-items: center; gap: 22px;100 }101 .suggest-right {102 opacity: 0.7;103 }104 105 /* Big empty area */106 .content-area {107 position: absolute;108 left: 0;109 top: 300px;110 width: 1080px;111 height: 1200px;112 background: #000;113 }114 115 /* Floating mic button */116 .floating-mic {117 position: absolute;118 right: 48px;119 top: 1340px;120 width: 168px;121 height: 168px;122 border-radius: 50%;123 background: #0a0a0a;124 box-shadow: 0 6px 24px rgba(0,0,0,0.6);125 display: flex;126 align-items: center;127 justify-content: center;128 border: 2px solid #191919;129 }130 131 /* Keyboard */132 .keyboard {133 position: absolute;134 bottom: 0;135 left: 0;136 width: 1080px;137 height: 880px;138 background: #121212;139 border-top-left-radius: 24px;140 border-top-right-radius: 24px;141 box-shadow: 0 -12px 24px rgba(0,0,0,0.7);142 }143 .kb-suggest {144 height: 96px;145 padding: 0 24px;146 box-sizing: border-box;147 display: flex;148 align-items: center;149 justify-content: space-between;150 color: #d7d7d7;151 font-size: 38px;152 }153 .kb-suggest-left {154 display: flex; align-items: center; gap: 22px;155 }156 .grid9 {157 display: grid; grid-template-columns: repeat(3, 10px); grid-gap: 4px;158 width: 40px; height: 40px;159 }160 .grid9 span { display: block; width: 10px; height: 10px; background: #d7d7d7; border-radius: 2px; }161 .kb-words { display: flex; gap: 18px; align-items: center; }162 .kb-words .divider { opacity: 0.5; }163 164 .keys-row {165 display: flex;166 justify-content: space-between;167 padding: 12px 36px;168 box-sizing: border-box;169 }170 .key {171 width: 92px; height: 112px; border-radius: 18px; background: #1e1e1e;172 color: #e6e6e6; font-size: 44px; display: flex; align-items: center; justify-content: center;173 }174 .key.wide { width: 150px; }175 .spacebar { flex: 1; height: 112px; border-radius: 18px; background: #1e1e1e; margin: 0 12px; }176 .key.light { background: #dbe6ff; color: #111; }177 178 .bottom-row {179 display: flex; align-items: center; padding: 12px 24px; box-sizing: border-box; gap: 12px;180 }181 .search-send {182 width: 120px; height: 120px; border-radius: 24px; background: #cfe0ff;183 display: flex; align-items: center; justify-content: center;184 }185 .corner-btn {186 width: 120px; height: 120px; border-radius: 24px; background: #1e1e1e;187 display: flex; align-items: center; justify-content: center; color: #e6e6e6; font-size: 40px;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status bar -->195 <div class="status-bar">196 <div class="status-left">197 <div>9:53</div>198 <div class="dot"></div>199 <div class="dot"></div>200 <div class="dot"></div>201 <div class="dot"></div>202 <div class="dot"></div>203 <div class="dot" style="opacity:0.5;"></div>204 </div>205 <div class="status-right">206 <div class="wifi"></div>207 <div class="battery"></div>208 </div>209 </div>210 211 <!-- Search Header -->212 <div class="search-header">213 <div class="search-row">214 <div class="icon-btn">215 <svg width="48" height="48" viewBox="0 0 24 24">216 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 <div class="search-pill">220 <div class="pill-text">10 things to do in singapore | travel guide</div>221 <div class="pill-x">222 <svg width="32" height="32" viewBox="0 0 24 24">223 <path d="M6 6l12 12M18 6l-12 12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>224 </svg>225 </div>226 </div>227 </div>228 229 <div class="suggestion">230 <div class="suggest-left">231 <svg width="42" height="42" viewBox="0 0 24 24">232 <circle cx="10" cy="10" r="6" stroke="#b5b5b5" stroke-width="2" fill="none"/>233 <path d="M16 16l5 5" stroke="#b5b5b5" stroke-width="2" stroke-linecap="round"/>234 </svg>235 <div>top 10 things to do in singapore travel guide 4k</div>236 </div>237 <div class="suggest-right">238 <svg width="40" height="40" viewBox="0 0 24 24">239 <path d="M7 7l10 5-10 5V7z" fill="#b5b5b5"/>240 </svg>241 </div>242 </div>243 </div>244 245 <!-- Large empty dark area -->246 <div class="content-area"></div>247 248 <!-- Floating mic button -->249 <div class="floating-mic">250 <svg width="80" height="80" viewBox="0 0 24 24">251 <rect x="8" y="4" width="8" height="12" rx="4" fill="#fff"/>252 <path d="M12 16v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>253 <path d="M7 12a5 5 0 0010 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>254 </svg>255 </div>256 257 <!-- Keyboard -->258 <div class="keyboard">259 <div class="kb-suggest">260 <div class="kb-suggest-left">261 <div class="grid9">262 <span></span><span></span><span></span>263 <span></span><span></span><span></span>264 <span></span><span></span><span></span>265 </div>266 <div class="kb-words">267 <span>guide</span>268 <span class="divider">|</span>269 <span>guides</span>270 <span class="divider">|</span>271 <span>🐕</span>272 </div>273 </div>274 <div style="display:flex; align-items:center; gap:18px;">275 <svg width="42" height="42" viewBox="0 0 24 24">276 <path d="M12 3v9" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round"/>277 <circle cx="12" cy="6" r="3" fill="#d7d7d7"/>278 </svg>279 <svg width="42" height="42" viewBox="0 0 24 24">280 <path d="M5 5h14v14H5z" stroke="#d7d7d7" stroke-width="2" fill="none"/>281 </svg>282 </div>283 </div>284 285 <div class="keys-row" style="margin-top:8px;">286 <div class="key">q</div>287 <div class="key">w</div>288 <div class="key">e</div>289 <div class="key">r</div>290 <div class="key">t</div>291 <div class="key">y</div>292 <div class="key">u</div>293 <div class="key">i</div>294 <div class="key">o</div>295 <div class="key">p</div>296 </div>297 298 <div class="keys-row">299 <div class="key">a</div>300 <div class="key">s</div>301 <div class="key">d</div>302 <div class="key">f</div>303 <div class="key">g</div>304 <div class="key">h</div>305 <div class="key">j</div>306 <div class="key">k</div>307 <div class="key">l</div>308 </div>309 310 <div class="keys-row">311 <div class="key wide">⇧</div>312 <div class="key">z</div>313 <div class="key">x</div>314 <div class="key">c</div>315 <div class="key">v</div>316 <div class="key">b</div>317 <div class="key">n</div>318 <div class="key">m</div>319 <div class="key wide">⌫</div>320 </div>321 322 <div class="bottom-row">323 <div class="corner-btn">?123</div>324 <div class="corner-btn">,</div>325 <div class="corner-btn">😊</div>326 <div class="spacebar"></div>327 <div class="corner-btn">.</div>328 <div class="search-send">329 <svg width="42" height="42" viewBox="0 0 24 24">330 <circle cx="10" cy="10" r="6" stroke="#1b2a61" stroke-width="2" fill="none"/>331 <path d="M16 16l5 5" stroke="#1b2a61" stroke-width="2" stroke-linecap="round"/>332 </svg>333 </div>334 </div>335 </div>336 337</div>338</body>339</html>