GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #e9f0e1; /* soft mint like the screenshot */13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 display: flex;24 align-items: center;25 padding: 0 38px;26 box-sizing: border-box;27 color: #2b2b2b;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-bar .right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .icon-small {38 width: 40px; height: 40px;39 }40 41 /* Header */42 .header {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 120px;48 display: flex;49 align-items: center;50 box-sizing: border-box;51 padding: 0 30px;52 }53 .back-btn {54 width: 90px; height: 90px;55 display: flex; align-items: center; justify-content: center;56 margin-right: 10px;57 }58 .title {59 font-size: 56px; font-weight: 600;60 }61 62 /* Chips row */63 .chips {64 position: absolute;65 top: 240px;66 left: 0;67 width: 1080px;68 padding: 0 24px;69 box-sizing: border-box;70 display: flex;71 gap: 22px;72 }73 .chip {74 display: inline-flex;75 align-items: center;76 gap: 18px;77 background: #fafcf7;78 border: 2px solid #cfd7c6;79 border-radius: 26px;80 padding: 20px 28px;81 font-size: 40px;82 }83 .chip svg { width: 44px; height: 44px; }84 85 /* Recent searches list */86 .list {87 position: absolute;88 top: 380px;89 left: 0;90 width: 1080px;91 box-sizing: border-box;92 padding: 0 36px;93 }94 .list-item {95 height: 120px;96 display: flex;97 align-items: center;98 border-bottom: 2px solid #e1e6d8;99 }100 .list-item:last-child { border-bottom: none; }101 .list-icon { width: 56px; height: 56px; margin-right: 26px; }102 .list-text { font-size: 48px; }103 .list-close {104 margin-left: auto;105 width: 60px; height: 60px;106 }107 108 /* Large empty space to emulate content area */109 .content-space {110 position: absolute;111 top: 620px;112 left: 0;113 width: 1080px;114 height: 860px;115 }116 117 /* Keyboard representation */118 .keyboard {119 position: absolute;120 bottom: 0;121 left: 0;122 width: 1080px;123 height: 920px;124 background: #eef4e6;125 box-sizing: border-box;126 padding: 30px 30px 40px 30px;127 border-top: 2px solid #dde5d2;128 }129 130 .kb-quick {131 display: flex; align-items: center; gap: 34px;132 margin-bottom: 28px;133 }134 .kb-quick .circle {135 width: 88px; height: 88px; background: #cee2c6;136 border-radius: 20px; display: flex; justify-content: center; align-items: center;137 }138 139 .keys-row {140 display: flex; gap: 18px; justify-content: space-between;141 margin-bottom: 18px;142 }143 .key {144 flex: 1;145 max-width: 90px;146 height: 110px;147 background: #ffffff;148 border: 2px solid #e6e6e6;149 border-radius: 24px;150 display: flex; align-items: center; justify-content: center;151 font-size: 42px;152 color: #222;153 }154 .key.wide { max-width: 140px; }155 .bottom-row {156 display: flex; align-items: center; gap: 20px; margin-top: 16px;157 }158 .key-long {159 flex: 1;160 height: 110px;161 background: #ffffff;162 border: 2px solid #e6e6e6;163 border-radius: 24px;164 }165 .kb-right-fab {166 margin-left: auto;167 width: 120px; height: 120px;168 background: #9fd19c;169 border-radius: 80px;170 display: flex; align-items: center; justify-content: center;171 border: 2px solid #7fbf78;172 }173 .subtitle {174 font-size: 28px; color: #6c7465;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="status-bar">183 <div>11:21</div>184 <div class="right">185 <span class="subtitle">•</span>186 <!-- Simple status icons -->187 <svg class="icon-small" viewBox="0 0 24 24">188 <rect x="3" y="12" width="3" height="9" fill="#333"></rect>189 <rect x="9" y="9" width="3" height="12" fill="#333"></rect>190 <rect x="15" y="6" width="3" height="15" fill="#333"></rect>191 </svg>192 <svg class="icon-small" viewBox="0 0 24 24">193 <rect x="3" y="6" width="18" height="12" fill="none" stroke="#333" stroke-width="2"></rect>194 <rect x="7" y="10" width="10" height="4" fill="#333"></rect>195 </svg>196 <svg class="icon-small" viewBox="0 0 24 24">197 <rect x="3" y="4" width="18" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>198 <rect x="6" y="7" width="12" height="6" fill="#333"></rect>199 </svg>200 </div>201 </div>202 203 <!-- Header -->204 <div class="header">205 <div class="back-btn">206 <svg viewBox="0 0 24 24" width="60" height="60">207 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>208 </svg>209 </div>210 <div class="title">Search</div>211 </div>212 213 <!-- Chips -->214 <div class="chips">215 <div class="chip">216 <svg viewBox="0 0 24 24">217 <circle cx="8" cy="12" r="5" fill="none" stroke="#333" stroke-width="2"></circle>218 <rect x="14" y="7" width="6" height="10" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>219 </svg>220 <span>Audio</span>221 </div>222 <div class="chip">223 <svg viewBox="0 0 24 24">224 <rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>225 <line x1="7" y1="8" x2="17" y2="8" stroke="#333" stroke-width="2"></line>226 <line x1="7" y1="12" x2="17" y2="12" stroke="#333" stroke-width="2"></line>227 </svg>228 <span>Documents & other</span>229 </div>230 <div class="chip">231 <svg viewBox="0 0 24 24">232 <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>233 <circle cx="9" cy="10" r="2" fill="#333"></circle>234 <path d="M6 16 L11 12 L18 16" fill="none" stroke="#333" stroke-width="2"></path>235 </svg>236 <span>Images</span>237 </div>238 </div>239 240 <!-- Recent searches -->241 <div class="list">242 <div class="list-item">243 <svg class="list-icon" viewBox="0 0 24 24">244 <circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"></circle>245 <line x1="12" y1="12" x2="12" y2="6" stroke="#333" stroke-width="2"></line>246 <line x1="12" y1="12" x2="16" y2="14" stroke="#333" stroke-width="2"></line>247 </svg>248 <div class="list-text">road</div>249 <svg class="list-close" viewBox="0 0 24 24">250 <line x1="6" y1="6" x2="18" y2="18" stroke="#333" stroke-width="2"></line>251 <line x1="18" y1="6" x2="6" y2="18" stroke="#333" stroke-width="2"></line>252 </svg>253 </div>254 255 <div class="list-item">256 <svg class="list-icon" viewBox="0 0 24 24">257 <circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"></circle>258 <line x1="12" y1="12" x2="12" y2="6" stroke="#333" stroke-width="2"></line>259 <line x1="12" y1="12" x2="16" y2="14" stroke="#333" stroke-width="2"></line>260 </svg>261 <div class="list-text">lehe108</div>262 <svg class="list-close" viewBox="0 0 24 24">263 <line x1="6" y1="6" x2="18" y2="18" stroke="#333" stroke-width="2"></line>264 <line x1="18" y1="6" x2="6" y2="18" stroke="#333" stroke-width="2"></line>265 </svg>266 </div>267 </div>268 269 <div class="content-space"></div>270 271 <!-- Keyboard -->272 <div class="keyboard">273 <div class="kb-quick">274 <div class="circle">275 <svg viewBox="0 0 24 24" width="46" height="46">276 <rect x="3" y="3" width="18" height="18" fill="none" stroke="#2f4f2f" stroke-width="2"></rect>277 <line x1="3" y1="9" x2="21" y2="9" stroke="#2f4f2f" stroke-width="2"></line>278 <line x1="3" y1="15" x2="21" y2="15" stroke="#2f4f2f" stroke-width="2"></line>279 </svg>280 </div>281 <div class="circle">282 <svg viewBox="0 0 24 24" width="46" height="46">283 <circle cx="12" cy="8" r="4" fill="none" stroke="#2f4f2f" stroke-width="2"></circle>284 <rect x="5" y="13" width="14" height="7" rx="3" fill="none" stroke="#2f4f2f" stroke-width="2"></rect>285 </svg>286 </div>287 <div class="circle"><span class="subtitle">GIF</span></div>288 <div class="circle">289 <svg viewBox="0 0 24 24" width="46" height="46">290 <circle cx="12" cy="12" r="9" fill="none" stroke="#2f4f2f" stroke-width="2"></circle>291 <circle cx="12" cy="12" r="2" fill="#2f4f2f"></circle>292 </svg>293 </div>294 <div class="circle">295 <svg viewBox="0 0 24 24" width="46" height="46">296 <path d="M10 4 L20 4 L20 14" fill="none" stroke="#2f4f2f" stroke-width="2"></path>297 <path d="M4 20 L14 20 L14 10" fill="none" stroke="#2f4f2f" stroke-width="2"></path>298 </svg>299 </div>300 <div class="circle">301 <svg viewBox="0 0 24 24" width="46" height="46">302 <circle cx="12" cy="12" r="8" fill="none" stroke="#2f4f2f" stroke-width="2"></circle>303 <path d="M8 16 C10 12, 14 12, 16 16" fill="none" stroke="#2f4f2f" stroke-width="2"></path>304 </svg>305 </div>306 <div class="circle">307 <svg viewBox="0 0 24 24" width="46" height="46">308 <circle cx="12" cy="8" r="3" fill="#2f4f2f"></circle>309 <rect x="9" y="11" width="6" height="9" rx="3" fill="#2f4f2f"></rect>310 </svg>311 </div>312 </div>313 314 <!-- Rows of keys -->315 <div class="keys-row">316 <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><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>317 </div>318 <div class="keys-row">319 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>320 </div>321 <div class="keys-row">322 <div class="key wide">⇧</div>323 <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><div class="key">n</div><div class="key">m</div>324 <div class="key wide">⌫</div>325 </div>326 327 <div class="bottom-row">328 <div class="key wide">?123</div>329 <div class="key wide">,</div>330 <div class="key wide">☺</div>331 <div class="key-long"></div>332 <div class="key wide">.</div>333 <div class="kb-right-fab">334 <svg viewBox="0 0 24 24" width="56" height="56">335 <circle cx="10" cy="10" r="7" fill="none" stroke="#134d1f" stroke-width="2"></circle>336 <line x1="16" y1="16" x2="22" y2="22" stroke="#134d1f" stroke-width="2"></line>337 </svg>338 </div>339 </div>340 </div>341 342</div>343</body>344</html>