GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Search List - Mobile UI</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: #FFFFFF;13 }14 15 /* Status bar */16 .statusbar {17 height: 88px;18 padding: 0 28px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #222;23 font-size: 30px;24 }25 .status-icons {26 display: flex;27 align-items: center;28 gap: 16px;29 }30 .dot { width: 10px; height: 10px; border-radius: 50%; background: #555; opacity: .7; }31 .icon-battery, .icon-signal {32 width: 38px; height: 20px; border: 2px solid #444; border-radius: 3px; position: relative;33 }34 .icon-battery::after { content: ''; position: absolute; right: -6px; top: 4px; width: 4px; height: 12px; background: #444; border-radius: 1px; }35 .icon-battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 24px; background: #4CAF50; }36 .icon-signal { border: none; background: linear-gradient(90deg,#bbb 0 50%,transparent 50%); }37 38 /* Search area */39 .search-area {40 position: relative;41 height: 160px;42 padding: 10px 24px 0 24px;43 }44 .back-btn {45 position: absolute;46 left: 28px;47 top: 48px;48 width: 64px;49 height: 64px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .back-btn svg { width: 42px; height: 42px; fill: #4F4F4F; }55 .search-bar {56 margin-left: 92px;57 height: 112px;58 border: 2px solid #E5E5E5;59 border-radius: 56px;60 background: #FAFAFA;61 display: flex;62 align-items: center;63 padding: 0 28px;64 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;65 }66 .search-text {67 font-size: 44px;68 color: #0F0F0F;69 flex: 1;70 }71 .clear-btn {72 width: 76px;73 height: 76px;74 border-radius: 38px;75 background: #FFFFFF;76 border: 2px solid #E6E6E6;77 color: #4F4F4F;78 font-size: 44px;79 display: flex;80 align-items: center;81 justify-content: center;82 }83 84 /* Results list */85 .results {86 position: absolute;87 top: 248px;88 left: 0;89 right: 0;90 bottom: 760px; /* leave room for keyboard */91 overflow-y: hidden;92 }93 .item {94 display: flex;95 align-items: center;96 padding: 26px 32px;97 border-bottom: 1px solid #EEEEEE;98 background: #FFF;99 }100 .pin {101 width: 84px;102 height: 84px;103 border-radius: 18px;104 background: #F5F5F5;105 border: 1px solid #E1E1E1;106 display: flex;107 align-items: center;108 justify-content: center;109 margin-right: 24px;110 }111 .pin svg { width: 40px; height: 40px; fill: #616161; }112 .meta { flex: 1; }113 .title { font-size: 44px; color: #1C1C1C; font-weight: 700; line-height: 1.1; }114 .subtitle { font-size: 32px; color: #6B6B6B; margin-top: 8px; }115 .go {116 width: 64px;117 height: 64px;118 border-radius: 14px;119 display: flex;120 align-items: center;121 justify-content: center;122 color: #5E5E5E;123 }124 .go svg { width: 30px; height: 30px; fill: #5E5E5E; }125 126 /* Keyboard */127 .keyboard {128 position: absolute;129 left: 0;130 right: 0;131 bottom: 0;132 height: 760px;133 background: #1F1F22;134 color: #EAEAEA;135 border-top: 1px solid #2B2B2E;136 }137 .kbd-toolbar {138 height: 104px;139 display: flex;140 align-items: center;141 padding: 0 28px;142 gap: 36px;143 color: #CFCFCF;144 }145 .tool {146 width: 74px; height: 74px; background: #2A2D31; border: 1px solid #3A3D42; border-radius: 12px;147 display: flex; align-items: center; justify-content: center; font-size: 30px;148 }149 .keys {150 padding: 10px 22px 22px;151 }152 .row {153 display: flex;154 gap: 14px;155 margin: 16px 0;156 justify-content: space-between;157 }158 .row.indent { padding-left: 48px; padding-right: 48px; }159 .key {160 height: 120px;161 width: 90px;162 background: #2B2F34;163 border: 1px solid #3B4046;164 border-radius: 14px;165 display: flex;166 align-items: center;167 justify-content: center;168 font-size: 44px;169 color: #ECECEC;170 }171 .key.wide { width: 140px; }172 .key.space { flex: 1; min-width: 420px; }173 .key.circle {174 width: 120px; height: 120px; border-radius: 60px; background: #C5D5F9; color: #1A73E8; border-color: #9CB7F5; font-weight: bold;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="statusbar">183 <div>11:03</div>184 <div class="status-icons">185 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>186 <div class="icon-signal"></div>187 <div class="icon-battery"><div class="level"></div></div>188 </div>189 </div>190 191 <!-- Search bar area -->192 <div class="search-area">193 <div class="back-btn" aria-label="Back">194 <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L3.5 12 14 3l1.5 1.5z"/></svg>195 </div>196 <div class="search-bar">197 <div class="search-text">York</div>198 <div class="clear-btn">×</div>199 </div>200 </div>201 202 <!-- Results -->203 <div class="results">204 <div class="item">205 <div class="pin">206 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>207 </div>208 <div class="meta">209 <div class="title">York</div>210 <div class="subtitle">PA, USA</div>211 </div>212 <div class="go">213 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>214 </div>215 </div>216 217 <div class="item">218 <div class="pin">219 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>220 </div>221 <div class="meta">222 <div class="title">York</div>223 <div class="subtitle">UK</div>224 </div>225 <div class="go">226 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>227 </div>228 </div>229 230 <div class="item">231 <div class="pin">232 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>233 </div>234 <div class="meta">235 <div class="title">York</div>236 <div class="subtitle">ME, USA</div>237 </div>238 <div class="go">239 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>240 </div>241 </div>242 243 <div class="item">244 <div class="pin">245 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>246 </div>247 <div class="meta">248 <div class="title">York</div>249 <div class="subtitle">NE, USA</div>250 </div>251 <div class="go">252 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>253 </div>254 </div>255 256 <div class="item">257 <div class="pin">258 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>259 </div>260 <div class="meta">261 <div class="title">York College</div>262 <div class="subtitle">Guy R Brewer Boulevard, Jamaica, NY, USA</div>263 </div>264 <div class="go">265 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>266 </div>267 </div>268 269 <div class="item">270 <div class="pin">271 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>272 </div>273 <div class="meta">274 <div class="title">York Haven</div>275 <div class="subtitle">PA, USA</div>276 </div>277 <div class="go">278 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>279 </div>280 </div>281 282 <div class="item">283 <div class="pin">284 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 12.5 7 12.5S19 14.2 19 9c0-3.9-3.1-7-7-7zm0 4a4 4 0 110 8 4 4 0 010-8z"/></svg>285 </div>286 <div class="meta">287 <div class="title">York</div>288 <div class="subtitle">SC, USA</div>289 </div>290 <div class="go">291 <svg viewBox="0 0 24 24"><path d="M5 12h9l-4-4 1.4-1.4L18.8 12l-7.4 5.4L10 16l4-4H5z"/></svg>292 </div>293 </div>294 </div>295 296 <!-- Keyboard -->297 <div class="keyboard">298 <div class="kbd-toolbar">299 <div class="tool">▦</div>300 <div class="tool">😊</div>301 <div class="tool">GIF</div>302 <div class="tool">⚙</div>303 <div class="tool">訳</div>304 <div class="tool">🎨</div>305 <div class="tool">🎤</div>306 </div>307 <div class="keys">308 <div class="row">309 <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>310 <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>311 </div>312 <div class="row indent">313 <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>314 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>315 </div>316 <div class="row">317 <div class="key wide">⇧</div>318 <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>319 <div class="key wide">⌫</div>320 </div>321 <div class="row">322 <div class="key wide">?123</div>323 <div class="key">,</div>324 <div class="key">☺</div>325 <div class="key space"></div>326 <div class="key">.</div>327 <div class="key circle">🔍</div>328 </div>329 </div>330 </div>331 332</div>333</body>334</html>