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; height:2400px;9 position:relative; overflow:hidden;10 background:#000000; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:100px; padding:0 40px;17 display:flex; align-items:center; justify-content:space-between;18 color:#cfcfcf; font-size:34px; letter-spacing:1px;19 }20 .status-left { display:flex; align-items:center; gap:20px;}21 .status-right { display:flex; align-items:center; gap:24px;}22 .pill {23 background:#1a1a1a; color:#dcdcdc; border-radius:14px; padding:6px 10px; font-size:24px;24 border:1px solid #2a2a2a;25 }26 .icon-battery, .icon-signal {27 width:40px; height:24px; border:2px solid #cfcfcf; border-radius:5px; position:relative;28 }29 .icon-battery:after {30 content:""; position:absolute; right:-8px; top:5px; width:6px; height:14px; background:#cfcfcf; border-radius:2px;31 }32 .icon-signal { border:none; }33 .icon-signal:before {34 content:""; position:absolute; bottom:0; left:2px; width:8px; height:8px; background:#cfcfcf;35 }36 .icon-signal:after {37 content:""; position:absolute; bottom:0; left:16px; width:8px; height:16px; background:#cfcfcf;38 box-shadow: 14px 0 0 #cfcfcf, 28px 0 0 #777;39 }40 41 /* Header with search */42 .search-header {43 position:absolute; top:110px; left:0; right:0;44 padding:0 30px; height:120px; display:flex; align-items:center;45 gap:20px;46 }47 .back-btn {48 width:90px; height:90px; display:flex; align-items:center; justify-content:center;49 }50 .search-field {51 flex:1; height:90px; background:#1f1f1f; border-radius:46px;52 display:flex; align-items:center; padding:0 26px; border:1px solid #2f2f2f;53 position:relative; color:#eaeaea; font-size:40px;54 }55 .search-text { flex:1; padding-left:6px; }56 .close-x {57 width:60px; height:60px; border-radius:30px; background:#2a2a2a; display:flex; align-items:center; justify-content:center;58 border:1px solid #3a3a3a;59 }60 61 /* Suggestions list */62 .suggestions {63 position:absolute; top:260px; left:0; right:0;64 padding:0 30px 20px 30px;65 }66 .row {67 display:flex; align-items:center; gap:26px;68 height:110px; border-bottom:1px solid #151515;69 }70 .row .magnifier {71 width:60px; height:60px; display:flex; align-items:center; justify-content:center;72 color:#cfcfcf;73 }74 .row .text { flex:1; font-size:44px; color:#f0f0f0; }75 .row .right-arrow {76 width:52px; height:52px; display:flex; align-items:center; justify-content:center; color:#9e9e9e;77 }78 79 /* Floating mic */80 .floating-mic {81 position:absolute; top:1040px; right:40px;82 width:150px; height:150px; border-radius:75px;83 background:#0f0f0f; border:2px solid #2a2a2a;84 box-shadow:0 8px 20px rgba(0,0,0,0.6);85 display:flex; align-items:center; justify-content:center;86 }87 88 /* Mini player bar */89 .mini-player {90 position:absolute; top:1280px; left:30px; right:30px;91 height:160px; background:#121212; border:1px solid #2b2b2b; border-radius:12px;92 display:flex; align-items:center; padding:12px;93 }94 .mini-thumb {95 width:240px; height:136px; background:#E0E0E0; border:1px solid #BDBDBD;96 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:8px;97 }98 .mini-info { flex:1; padding:0 24px; color:#e5e5e5; }99 .mini-title { font-size:40px; margin-bottom:8px; }100 .mini-sub { font-size:30px; color:#bfbfbf; }101 .mini-play {102 width:80px; height:80px; border-radius:40px; background:#2a2a2a; display:flex; align-items:center; justify-content:center;103 border:1px solid #3a3a3a;104 }105 106 /* Keyboard */107 .keyboard {108 position:absolute; left:0; right:0; bottom:0;109 height:860px; background:#0a0a0a; border-top:1px solid #1d1d1d;110 padding:20px 20px 30px;111 }112 .kb-suggestions {113 display:flex; gap:26px; margin-bottom:24px; padding-left:10px;114 }115 .chip {116 background:#1d1d1f; color:#eaeaea; border:1px solid #2b2b2b;117 border-radius:30px; padding:18px 26px; font-size:40px;118 }119 .kb-toprow {120 display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;121 padding:0 10px; color:#cfcfcf;122 }123 .dots { width:70px; height:70px; border-radius:16px; background:#1d1d1f; border:1px solid #2b2b2b; display:flex; align-items:center; justify-content:center;}124 .kb-letters {125 display:grid; grid-template-columns: repeat(10, 1fr); grid-gap:16px;126 padding:0 10px;127 }128 .kb-key {129 height:110px; background:#212124; border:1px solid #2e2e30; color:#f5f5f5;130 border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:46px;131 }132 .kb-row { margin-top:22px; display:grid; grid-template-columns: repeat(9, 1fr); grid-gap:16px; padding:0 50px;}133 .kb-row2 { margin-top:22px; display:grid; grid-template-columns: repeat(7, 1fr); grid-gap:16px; padding:0 100px;}134 .kb-bottom {135 margin-top:22px; display:flex; align-items:center; gap:16px; padding:0 10px;136 }137 .space { flex:1; height:120px; }138 .small { height:120px; width:160px; }139 .search-btn {140 width:160px; height:120px; background:#cfd7ff; color:#222; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:44px;141 }142 143 /* Simple SVG icons */144 svg { fill:#cfcfcf; }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status Bar -->151 <div class="status-bar">152 <div class="status-left">153 <div style="font-weight:bold;">7:05</div>154 <div class="pill">M</div>155 <div class="pill">G</div>156 <div class="pill">YT</div>157 </div>158 <div class="status-right">159 <div class="icon-signal"></div>160 <div class="icon-battery"></div>161 </div>162 </div>163 164 <!-- Search Header -->165 <div class="search-header">166 <div class="back-btn">167 <svg width="56" height="56" viewBox="0 0 24 24">168 <path d="M20 11H7.8l5.2-5.2-1.4-1.4L4 12l7.6 7.6 1.4-1.4L7.8 13H20z"/>169 </svg>170 </div>171 <div class="search-field">172 <div class="search-text">Biking</div>173 <div class="close-x">174 <svg width="32" height="32" viewBox="0 0 24 24">175 <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"/>176 </svg>177 </div>178 </div>179 </div>180 181 <!-- Suggestions List -->182 <div class="suggestions">183 <div class="row">184 <div class="magnifier">185 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>186 </div>187 <div class="text">biking</div>188 <div class="right-arrow">189 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>190 </div>191 </div>192 <div class="row">193 <div class="magnifier">194 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>195 </div>196 <div class="text">biking queens</div>197 <div class="right-arrow">198 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>199 </div>200 </div>201 <div class="row">202 <div class="magnifier">203 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>204 </div>205 <div class="text">biking frank ocean</div>206 <div class="right-arrow">207 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>208 </div>209 </div>210 <div class="row">211 <div class="magnifier">212 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>213 </div>214 <div class="text">biking race</div>215 <div class="right-arrow">216 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>217 </div>218 </div>219 <div class="row">220 <div class="magnifier">221 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>222 </div>223 <div class="text">biking videos</div>224 <div class="right-arrow">225 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>226 </div>227 </div>228 <div class="row">229 <div class="magnifier">230 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>231 </div>232 <div class="text">biking dose</div>233 <div class="right-arrow">234 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>235 </div>236 </div>237 <div class="row">238 <div class="magnifier">239 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>240 </div>241 <div class="text">biking game</div>242 <div class="right-arrow">243 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>244 </div>245 </div>246 <div class="row">247 <div class="magnifier">248 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6"/></svg>249 </div>250 <div class="text">biking shorts</div>251 <div class="right-arrow">252 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 17l8-8v6h2V5H9v2h6L7 15z"/></svg>253 </div>254 </div>255 </div>256 257 <!-- Floating mic button -->258 <div class="floating-mic">259 <svg width="70" height="70" viewBox="0 0 24 24">260 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2z"/>261 </svg>262 </div>263 264 <!-- Mini player -->265 <div class="mini-player">266 <div class="mini-thumb">[IMG: Podcast Host]</div>267 <div class="mini-info">268 <div class="mini-title">This American Life: The Call</div>269 <div class="mini-sub">This American Life</div>270 </div>271 <div class="mini-play">272 <svg width="42" height="42" viewBox="0 0 24 24">273 <path d="M8 5v14l11-7z" fill="#eaeaea"/>274 </svg>275 </div>276 </div>277 278 <!-- Keyboard -->279 <div class="keyboard">280 <div class="kb-suggestions">281 <div class="chip">Biking</div>282 <div class="chip">Hiking</div>283 <div class="chip">Viking</div>284 </div>285 <div class="kb-toprow">286 <div class="dots">•••</div>287 <div style="font-size:48px;">Keyboard</div>288 <div class="dots">🎤</div>289 </div>290 <!-- QWERTY row -->291 <div class="kb-letters">292 <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div>293 <div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>294 </div>295 <!-- ASDF row -->296 <div class="kb-row">297 <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div>298 <div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div>299 </div>300 <!-- ZXCV row -->301 <div class="kb-row2">302 <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div>303 </div>304 <!-- Bottom bar -->305 <div class="kb-bottom">306 <div class="kb-key small">?123</div>307 <div class="kb-key small">,</div>308 <div class="kb-key small">🙂</div>309 <div class="kb-key space"> </div>310 <div class="kb-key small">.</div>311 <div class="search-btn">312 <svg width="46" height="46" viewBox="0 0 24 24">313 <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm11 3-6-6" stroke="#222" stroke-width="2" fill="none"/>314 </svg>315 </div>316 </div>317 </div>318 319</div>320</body>321</html>