GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Results 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:#FFFFFF;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:90px; padding:0 24px;17 display:flex; align-items:center; justify-content:space-between;18 color:#1f1f1f; font-weight:600; font-size:34px;19 }20 .status-left { display:flex; align-items:center; gap:22px; }21 .dot { width:16px; height:16px; border-radius:50%; background:#333; opacity:.6; }22 .status-right { display:flex; align-items:center; gap:18px; }23 .status-icon {24 width:34px; height:34px; border-radius:4px; background:#333; opacity:.7;25 }26 27 /* Search area */28 .top-area { position:absolute; top:90px; left:0; right:0; height:160px; }29 .back-btn {30 position:absolute; left:32px; top:36px;31 width:72px; height:72px; border-radius:36px;32 display:flex; align-items:center; justify-content:center;33 }34 .back-btn svg { width:40px; height:40px; }35 .search-bar {36 position:absolute; left:120px; right:40px; top:20px;37 height:96px; background:#fff; border:2px solid #DADADA;38 border-radius:48px; display:flex; align-items:center;39 padding:0 28px; box-shadow:0 2px 0 rgba(0,0,0,0.04) inset;40 }41 .search-input {42 flex:1; font-size:44px; color:#202124; font-weight:600;43 }44 .search-actions { display:flex; align-items:center; gap:16px; }45 .circle-icon {46 width:64px; height:64px; border-radius:50%;47 display:flex; align-items:center; justify-content:center;48 background:#F2F3F5; border:1px solid #E0E0E0;49 }50 .circle-icon svg { width:34px; height:34px; }51 52 /* Result list */53 .results {54 position:absolute; left:0; right:0; top:250px; bottom:1000px;55 overflow:hidden; padding-left:36px; padding-right:24px;56 }57 .item {58 display:flex; align-items:flex-start; gap:28px;59 padding:32px 0;60 border-bottom:1px solid #E8E8E8;61 }62 .left-badge {63 width:72px; height:72px; border-radius:36px;64 background:#F3F4F6; border:1px solid #DADADA;65 display:flex; align-items:center; justify-content:center;66 flex:0 0 72px;67 }68 .left-badge svg { width:40px; height:40px; }69 .item-text { flex:1; }70 .title { font-size:48px; color:#222; font-weight:700; line-height:1.2; }71 .subtitle { margin-top:8px; font-size:34px; color:#6A6A6A; }72 .right-arrow { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }73 .right-arrow svg { width:40px; height:40px; }74 75 /* Keyboard */76 .keyboard {77 position:absolute; left:0; right:0; bottom:0;78 height:980px; background:#121212; color:#EDEDED;79 border-top-left-radius:26px; border-top-right-radius:26px;80 }81 .kb-suggestion {82 height:120px; padding:0 24px; display:flex; align-items:center; gap:24px;83 color:#DCDCDC; font-size:42px; border-bottom:1px solid rgba(255,255,255,0.08);84 }85 .kb-pill {86 background:#1E1E1E; border:1px solid #333; border-radius:20px;87 padding:8px 20px; font-weight:600;88 }89 .kb-suggestion .right-icons { margin-left:auto; display:flex; align-items:center; gap:26px; }90 .kb-small {91 width:50px; height:50px; border-radius:25px; background:#1E1E1E; border:1px solid #333;92 }93 94 .kb-row { padding:28px 22px; display:flex; justify-content:center; gap:18px; }95 .key {96 width:92px; height:120px; background:#2A2A2A; border-radius:18px;97 display:flex; align-items:center; justify-content:center;98 font-size:44px; color:#F5F5F5; border:1px solid #3A3A3A;99 }100 .key.wide { width:130px; }101 .key.space { flex:1; height:120px; }102 .key.back { width:150px; }103 .bottom-row { padding:16px 22px; display:flex; align-items:center; gap:16px; }104 .search-circle {105 margin-left:auto;106 width:120px; height:120px; border-radius:60px;107 background:#D7E7FF; border:1px solid #AFC8F4;108 display:flex; align-items:center; justify-content:center;109 }110 .search-circle svg { width:56px; height:56px; }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Status bar -->117 <div class="status-bar">118 <div class="status-left">119 <div>11:00</div>120 <div class="dot"></div>121 <div class="dot"></div>122 <div class="dot"></div>123 <div class="dot"></div>124 <div style="width:6px; height:6px; border-radius:3px; background:#333; opacity:.6;"></div>125 </div>126 <div class="status-right">127 <div class="status-icon"></div>128 <div class="status-icon"></div>129 </div>130 </div>131 132 <!-- Search area -->133 <div class="top-area">134 <div class="back-btn">135 <svg viewBox="0 0 24 24">136 <path d="M15 5l-7 7 7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>137 </svg>138 </div>139 <div class="search-bar">140 <div class="search-input">Grays Ferry Crescent</div>141 <div class="search-actions">142 <div class="circle-icon">143 <svg viewBox="0 0 24 24">144 <path d="M18 6L6 18M6 6l12 12" stroke="#444" stroke-width="2" stroke-linecap="round"/>145 </svg>146 </div>147 </div>148 </div>149 </div>150 151 <!-- Results list -->152 <div class="results">153 <div class="item">154 <div class="left-badge">155 <!-- clock icon -->156 <svg viewBox="0 0 24 24">157 <circle cx="12" cy="12" r="9" stroke="#666" stroke-width="2" fill="none"/>158 <path d="M12 7v6l4 2" stroke="#666" stroke-width="2" stroke-linecap="round"/>159 </svg>160 </div>161 <div class="item-text">162 <div class="title">Grays Ferry Crescent Skatepark</div>163 <div class="subtitle">Grays Ferry Avenue, Philadelphia, PA, USA</div>164 </div>165 <div class="right-arrow">166 <svg viewBox="0 0 24 24">167 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 </div>171 172 <div class="item">173 <div class="left-badge">174 <!-- pin icon -->175 <svg viewBox="0 0 24 24">176 <path d="M12 22s7-8 7-12A7 7 0 1 0 5 10c0 4 7 12 7 12z" fill="#777"/>177 <circle cx="12" cy="10" r="3" fill="#fff"/>178 </svg>179 </div>180 <div class="item-text">181 <div class="title">Grays Ferry Crescent Trail Park</div>182 <div class="subtitle">Schuylkill Avenue, Philadelphia, PA, USA</div>183 </div>184 <div class="right-arrow">185 <svg viewBox="0 0 24 24">186 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187 </svg>188 </div>189 </div>190 191 <div class="item">192 <div class="left-badge">193 <svg viewBox="0 0 24 24">194 <path d="M12 22s7-8 7-12A7 7 0 1 0 5 10c0 4 7 12 7 12z" fill="#777"/>195 <circle cx="12" cy="10" r="3" fill="#fff"/>196 </svg>197 </div>198 <div class="item-text">199 <div class="title">Grays Ferry Crescent Trail</div>200 <div class="subtitle">Philadelphia, PA, USA</div>201 </div>202 <div class="right-arrow">203 <svg viewBox="0 0 24 24">204 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205 </svg>206 </div>207 </div>208 209 <div class="item">210 <div class="left-badge">211 <svg viewBox="0 0 24 24">212 <path d="M12 22s7-8 7-12A7 7 0 1 0 5 10c0 4 7 12 7 12z" fill="#777"/>213 <circle cx="12" cy="10" r="3" fill="#fff"/>214 </svg>215 </div>216 <div class="item-text">217 <div class="title">Grays Ferry Crescent Fishing Plaza</div>218 <div class="subtitle">Philadelphia, PA, USA</div>219 </div>220 <div class="right-arrow">221 <svg viewBox="0 0 24 24">222 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 </div>226 227 <div class="item">228 <div class="left-badge">229 <svg viewBox="0 0 24 24">230 <path d="M12 22s7-8 7-12A7 7 0 1 0 5 10c0 4 7 12 7 12z" fill="#777"/>231 <circle cx="12" cy="10" r="3" fill="#fff"/>232 </svg>233 </div>234 <div class="item-text">235 <div class="title">Grays Ferry Crescent</div>236 <div class="subtitle">Grays Ferry Crescent Trail, Philadelphia, PA</div>237 </div>238 <div class="right-arrow">239 <svg viewBox="0 0 24 24">240 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 </div>244 245 <div class="item">246 <div class="left-badge">247 <svg viewBox="0 0 24 24">248 <path d="M12 22s7-8 7-12A7 7 0 1 0 5 10c0 4 7 12 7 12z" fill="#777"/>249 <circle cx="12" cy="10" r="3" fill="#fff"/>250 </svg>251 </div>252 <div class="item-text">253 <div class="title">Grays Ferry Crescent Fishing Pier</div>254 <div class="subtitle">Philadelphia, PA, USA</div>255 </div>256 <div class="right-arrow">257 <svg viewBox="0 0 24 24">258 <path d="M5 19l12-12v8h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>259 </svg>260 </div>261 </div>262 </div>263 264 <!-- Keyboard -->265 <div class="keyboard">266 <div class="kb-suggestion">267 <div class="kb-small"></div>268 <div class="kb-pill">Crescent</div>269 <div class="right-icons">270 <div class="kb-small"></div>271 <div class="kb-small"></div>272 <div class="kb-small"></div>273 </div>274 </div>275 276 <div class="kb-row">277 <div class="key">q</div>278 <div class="key">w</div>279 <div class="key">e</div>280 <div class="key">r</div>281 <div class="key">t</div>282 <div class="key">y</div>283 <div class="key">u</div>284 <div class="key">i</div>285 <div class="key">o</div>286 <div class="key">p</div>287 </div>288 289 <div class="kb-row">290 <div class="key">a</div>291 <div class="key">s</div>292 <div class="key">d</div>293 <div class="key">f</div>294 <div class="key">g</div>295 <div class="key">h</div>296 <div class="key">j</div>297 <div class="key">k</div>298 <div class="key">l</div>299 </div>300 301 <div class="kb-row">302 <div class="key">z</div>303 <div class="key">x</div>304 <div class="key">c</div>305 <div class="key">v</div>306 <div class="key">b</div>307 <div class="key">n</div>308 <div class="key">m</div>309 <div class="key back">310 <svg viewBox="0 0 24 24">311 <path d="M3 12l5-5h13v10H8z" fill="#bbb"/>312 </svg>313 </div>314 </div>315 316 <div class="bottom-row">317 <div class="key wide">?123</div>318 <div class="key wide">,</div>319 <div class="key wide">🙂</div>320 <div class="key space"></div>321 <div class="key wide">.</div>322 <div class="search-circle">323 <svg viewBox="0 0 24 24">324 <circle cx="10" cy="10" r="7" stroke="#2E5DA8" stroke-width="2" fill="none"/>325 <path d="M15 15l5 5" stroke="#2E5DA8" stroke-width="2" stroke-linecap="round"/>326 </svg>327 </div>328 </div>329 </div>330 331</div>332</body>333</html>