GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Search + Keyboard UI</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: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 padding: 0 40px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #5a5a5a;28 font-size: 44px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .dot {37 width: 10px; height: 10px; background: #777; border-radius: 50%;38 margin-left: 6px;39 opacity: 0.7;40 }41 42 /* Search bar */43 .search-wrap {44 position: absolute;45 top: 120px;46 left: 40px;47 width: 1000px;48 height: 130px;49 border-radius: 65px;50 background: #f5f6f7;51 border: 2px solid #e6e6e6;52 box-sizing: border-box;53 display: flex;54 align-items: center;55 padding: 0 36px;56 gap: 28px;57 }58 .search-input-area {59 position: relative;60 flex: 1;61 height: 100%;62 display: flex;63 align-items: center;64 }65 .cursor {66 width: 3px;67 height: 64px;68 background: #2c6bed;69 animation: blink 1.2s infinite;70 margin-left: 6px;71 }72 @keyframes blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }73 74 .icon-button {75 width: 88px; height: 88px;76 border-radius: 44px;77 display: flex; align-items: center; justify-content: center;78 background: #ffffff;79 border: 2px solid #dcdcdc;80 }81 .search-icons svg { width: 48px; height: 48px; }82 83 /* Empty content area below search */84 .content-area {85 position: absolute;86 top: 270px;87 left: 0;88 width: 1080px;89 height: 1080px;90 background: #ffffff;91 }92 93 /* Keyboard */94 .keyboard {95 position: absolute;96 bottom: 96px;97 left: 0;98 width: 1080px;99 height: 930px;100 background: #1f1f1f;101 color: #e9e9e9;102 box-sizing: border-box;103 padding: 34px 26px 26px;104 }105 .kb-top-row {106 display: flex;107 justify-content: space-between;108 margin: 0 18px 30px;109 }110 .kb-top-btn {111 width: 120px; height: 84px;112 background: #2a2a2a;113 border-radius: 18px;114 display: flex; align-items: center; justify-content: center;115 border: 1px solid #3b3b3b;116 }117 .kb-top-btn svg { width: 48px; height: 48px; }118 119 .key-row {120 display: flex;121 justify-content: space-between;122 padding: 0 18px;123 margin-bottom: 28px;124 }125 .key {126 width: 88px; height: 120px;127 background: #2a2a2a;128 border-radius: 22px;129 display: flex; align-items: center; justify-content: center;130 border: 1px solid #3b3b3b;131 font-size: 48px;132 position: relative;133 color: #e8e8e8;134 }135 .key.wide { width: 112px; }136 .key.long { width: 160px; }137 .key.backspace { width: 170px; }138 .key svg { width: 48px; height: 48px; }139 .num-hint {140 position: absolute; top: 8px; left: 10px;141 font-size: 22px; color: #b5b5b5;142 }143 144 .bottom-row {145 display: grid;146 grid-template-columns: 180px 120px 120px 420px 120px 180px;147 gap: 22px;148 padding: 0 18px;149 align-items: center;150 }151 .round-key {152 height: 120px; border-radius: 60px; background: #2a2a2a;153 border: 1px solid #3b3b3b; color: #e8e8e8;154 display: flex; align-items: center; justify-content: center; font-size: 44px;155 }156 .round-key.light { background: #cfe0f6; color: #0d274e; border-color: #afc6e6; }157 .spacebar {158 height: 120px; background: #2a2a2a; border-radius: 26px;159 border: 1px solid #3b3b3b;160 }161 .search-action {162 background: #cfe0f6; color: #0d274e; border-color: #afc6e6;163 display: flex; align-items: center; justify-content: center;164 }165 166 /* Bottom nav line */167 .bottom-line {168 position: absolute;169 bottom: 32px;170 left: 50%;171 transform: translateX(-50%);172 width: 300px; height: 10px;173 background: #cfcfcf; border-radius: 8px;174 }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status bar -->181 <div class="status-bar">182 <div>11:04</div>183 <div class="status-icons">184 <!-- simple placeholders mimicking tiny app indicators -->185 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>186 <!-- Wifi icon -->187 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">188 <path d="M6 16c8-8 24-8 32 0" stroke="#616161" stroke-width="3" stroke-linecap="round"/>189 <path d="M11 21c6-6 16-6 22 0" stroke="#616161" stroke-width="3" stroke-linecap="round"/>190 <path d="M16 26c4-4 8-4 12 0" stroke="#616161" stroke-width="3" stroke-linecap="round"/>191 <circle cx="22" cy="31" r="3" fill="#616161"/>192 </svg>193 <!-- Battery icon -->194 <svg width="60" height="44" viewBox="0 0 60 44" fill="none">195 <rect x="2" y="10" width="48" height="24" rx="4" stroke="#616161" stroke-width="3"/>196 <rect x="6" y="14" width="40" height="16" rx="2" fill="#616161"/>197 <rect x="52" y="16" width="6" height="12" rx="2" fill="#616161"/>198 </svg>199 </div>200 </div>201 202 <!-- Search bar -->203 <div class="search-wrap">204 <div class="icon-button">205 <!-- Back arrow -->206 <svg viewBox="0 0 48 48">207 <path d="M28 10 L12 24 L28 38" stroke="#4a4a4a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="search-input-area">211 <!-- blinking cursor to suggest input focus -->212 <div class="cursor"></div>213 </div>214 <div class="icon-button">215 <!-- Clear (X) icon -->216 <svg viewBox="0 0 48 48">217 <circle cx="24" cy="24" r="21" stroke="#4a4a4a" stroke-width="3" fill="none"/>218 <path d="M17 17 L31 31 M31 17 L17 31" stroke="#4a4a4a" stroke-width="3" stroke-linecap="round"/>219 </svg>220 </div>221 </div>222 223 <!-- Empty content area -->224 <div class="content-area"></div>225 226 <!-- Keyboard -->227 <div class="keyboard">228 <div class="kb-top-row">229 <div class="kb-top-btn">230 <!-- emoji icon -->231 <svg viewBox="0 0 48 48">232 <circle cx="24" cy="24" r="20" stroke="#dcdcdc" stroke-width="2" fill="none"/>233 <circle cx="17" cy="20" r="2.5" fill="#dcdcdc"/>234 <circle cx="31" cy="20" r="2.5" fill="#dcdcdc"/>235 <path d="M16 29c5 4 11 4 16 0" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>236 </svg>237 </div>238 <div class="kb-top-btn"><span style="font-size:44px;color:#dcdcdc;">GIF</span></div>239 <div class="kb-top-btn">240 <!-- gear -->241 <svg viewBox="0 0 48 48">242 <circle cx="24" cy="24" r="6" fill="#dcdcdc"/>243 <path d="M24 6v6M24 36v6M6 24h6M36 24h6M10 10l4 4M34 34l4 4M10 38l4-4M34 14l4-4" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>244 </svg>245 </div>246 <div class="kb-top-btn">247 <!-- translate icon -->248 <svg viewBox="0 0 48 48">249 <rect x="6" y="8" width="16" height="20" rx="3" stroke="#dcdcdc" stroke-width="2" fill="none"/>250 <rect x="26" y="20" width="16" height="20" rx="3" stroke="#dcdcdc" stroke-width="2" fill="none"/>251 <path d="M12 16h4M30 28h8" stroke="#dcdcdc" stroke-width="2"/>252 </svg>253 </div>254 <div class="kb-top-btn">255 <!-- palette icon -->256 <svg viewBox="0 0 48 48">257 <path d="M24 10c9 0 16 6 16 14a6 6 0 0 1-9 5h-4a5 5 0 0 0-5 5" stroke="#dcdcdc" stroke-width="2" fill="none"/>258 <circle cx="16" cy="18" r="2" fill="#dcdcdc"/>259 <circle cx="22" cy="16" r="2" fill="#dcdcdc"/>260 <circle cx="28" cy="18" r="2" fill="#dcdcdc"/>261 </svg>262 </div>263 <div class="kb-top-btn">264 <!-- mic -->265 <svg viewBox="0 0 48 48">266 <rect x="18" y="10" width="12" height="18" rx="6" fill="#dcdcdc"/>267 <path d="M12 22c0 7 5 12 12 12s12-5 12-12M24 34v6M18 40h12" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"/>268 </svg>269 </div>270 </div>271 272 <!-- Key rows -->273 <div class="key-row">274 <div class="key"><span class="num-hint">1</span>q</div>275 <div class="key"><span class="num-hint">2</span>w</div>276 <div class="key"><span class="num-hint">3</span>e</div>277 <div class="key"><span class="num-hint">4</span>r</div>278 <div class="key"><span class="num-hint">5</span>t</div>279 <div class="key"><span class="num-hint">6</span>y</div>280 <div class="key"><span class="num-hint">7</span>u</div>281 <div class="key"><span class="num-hint">8</span>i</div>282 <div class="key"><span class="num-hint">9</span>o</div>283 <div class="key"><span class="num-hint">0</span>p</div>284 </div>285 286 <div class="key-row">287 <div class="key long">a</div>288 <div class="key long">s</div>289 <div class="key long">d</div>290 <div class="key long">f</div>291 <div class="key long">g</div>292 <div class="key long">h</div>293 <div class="key long">j</div>294 <div class="key long">k</div>295 <div class="key long">l</div>296 </div>297 298 <div class="key-row">299 <div class="key backspace">300 <!-- Shift/home-like icon -->301 <svg viewBox="0 0 48 48">302 <path d="M10 30 L24 16 L38 30" stroke="#dcdcdc" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 <path d="M18 30h12" stroke="#dcdcdc" stroke-width="3" stroke-linecap="round"/>304 </svg>305 </div>306 <div class="key wide">z</div>307 <div class="key wide">x</div>308 <div class="key wide">c</div>309 <div class="key wide">v</div>310 <div class="key wide">b</div>311 <div class="key wide">n</div>312 <div class="key wide">m</div>313 <div class="key backspace">314 <!-- backspace -->315 <svg viewBox="0 0 60 48">316 <path d="M12 24l10-12h24a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H22L12 24z" stroke="#dcdcdc" stroke-width="2" fill="none"/>317 <path d="M34 18l8 8M42 18l-8 8" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>318 </svg>319 </div>320 </div>321 322 <div class="bottom-row">323 <div class="round-key light">?123</div>324 <div class="round-key">,</div>325 <div class="round-key">326 <!-- small emoji -->327 <svg viewBox="0 0 48 48">328 <circle cx="24" cy="24" r="20" stroke="#dcdcdc" stroke-width="2" fill="none"/>329 <circle cx="18" cy="20" r="3" fill="#dcdcdc"/>330 <circle cx="30" cy="20" r="3" fill="#dcdcdc"/>331 </svg>332 </div>333 <div class="spacebar"></div>334 <div class="round-key">.</div>335 <div class="round-key search-action">336 <!-- magnifying glass -->337 <svg width="60" height="60" viewBox="0 0 60 60">338 <circle cx="26" cy="26" r="16" stroke="#0d274e" stroke-width="4" fill="none"/>339 <path d="M40 40 L54 54" stroke="#0d274e" stroke-width="4" stroke-linecap="round"/>340 </svg>341 </div>342 </div>343 </div>344 345 <!-- Bottom nav line -->346 <div class="bottom-line"></div>347</div>348</body>349</html>