GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search List UI - Philadelphia</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #121212;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 90px;24 background: #121212;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 font-size: 34px;30 color: #eaeaea;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 18px;36 }37 .ghost-dot {38 width: 28px; height: 28px; border-radius: 50%; background: #cfcfcf; opacity: 0.6;39 }40 .status-right {41 margin-left: auto;42 display: flex;43 align-items: center;44 gap: 22px;45 }46 .icon-small svg { width: 38px; height: 38px; fill: none; stroke: #eaeaea; stroke-width: 2.5; }47 48 /* Search bar */49 .search-wrap {50 position: absolute;51 top: 110px;52 left: 36px;53 width: 1008px;54 height: 118px;55 border-radius: 60px;56 background: #1e1e1e;57 box-shadow: inset 0 0 0 1px #2a2a2a;58 display: flex;59 align-items: center;60 padding: 0 28px;61 box-sizing: border-box;62 }63 .search-left {64 display: flex; align-items: center; gap: 26px;65 }66 .search-left .back svg { width: 50px; height: 50px; fill: none; stroke: #eaeaea; stroke-width: 4; }67 .query {68 font-size: 48px; color: #ffffff;69 }70 .search-right {71 margin-left: auto; display: flex; align-items: center; gap: 20px;72 }73 .circle-icon {74 width: 64px; height: 64px; border-radius: 50%; background: #2a2a2a;75 display: flex; align-items: center; justify-content: center;76 }77 .circle-icon svg { width: 40px; height: 40px; stroke: #eaeaea; fill: none; stroke-width: 4; }78 79 /* Results list */80 .results {81 position: absolute;82 top: 260px;83 left: 0;84 width: 1080px;85 padding-bottom: 40px;86 }87 .item {88 display: flex;89 align-items: center;90 padding: 30px 36px;91 gap: 28px;92 }93 .item + .divider { margin-top: 8px; }94 .divider {95 height: 1px; background: #2a2a2a; margin: 0 36px;96 }97 .left-icon {98 width: 70px; height: 70px; border-radius: 18px; background: #1f1f1f; border: 1px solid #2c2c2c;99 display: flex; align-items: center; justify-content: center;100 }101 .left-icon svg { width: 44px; height: 44px; stroke: #c6c6c6; fill: none; stroke-width: 4; }102 .texts { flex: 1; }103 .title {104 font-size: 46px; color: #ffffff; line-height: 1.2; font-weight: 600;105 }106 .subtitle {107 font-size: 34px; color: #b0bec5; margin-top: 10px;108 }109 .right-launch {110 width: 62px; height: 62px; border-radius: 16px; background: #1f1f1f; border: 1px solid #2c2c2c;111 display: flex; align-items: center; justify-content: center;112 }113 .right-launch svg { width: 36px; height: 36px; stroke: #c6c6c6; fill: none; stroke-width: 4; }114 115 /* Keyboard */116 .keyboard {117 position: absolute;118 left: 0;119 bottom: 0;120 width: 1080px;121 height: 980px;122 background: #0f0f0f;123 border-top: 1px solid #2a2a2a;124 box-sizing: border-box;125 padding: 34px;126 }127 .kb-row {128 display: grid;129 grid-template-columns: repeat(10, 1fr);130 gap: 18px;131 margin-bottom: 24px;132 }133 .kb-key {134 height: 120px;135 border-radius: 18px;136 background: #262626;137 display: flex;138 align-items: center;139 justify-content: center;140 color: #eaeaea;141 font-size: 44px;142 box-shadow: inset 0 0 0 1px #303030;143 }144 .kb-row.short { grid-template-columns: repeat(9, 1fr); }145 .kb-row.bottom { grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr 4fr 0.9fr 0.9fr 1.2fr; }146 .space { font-size: 42px; color: #bdbdbd; }147 148 /* Floating search button */149 .fab {150 position: absolute;151 right: 40px;152 bottom: 1040px;153 width: 118px; height: 118px; border-radius: 59px;154 background: #cfe1ff;155 display: flex; align-items: center; justify-content: center;156 box-shadow: 0 6px 18px rgba(0,0,0,0.4);157 }158 .fab svg { width: 56px; height: 56px; stroke: #1a57ff; stroke-width: 6; fill: none; }159 160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Status Bar -->166 <div class="status-bar">167 <div class="status-left">168 <div style="font-weight:600;">11:05</div>169 <div class="ghost-dot"></div>170 <div class="ghost-dot"></div>171 <div class="ghost-dot"></div>172 <div class="ghost-dot"></div>173 <div class="ghost-dot" style="opacity:.3;"></div>174 </div>175 <div class="status-right">176 <div class="icon-small">177 <!-- Location indicator -->178 <svg viewBox="0 0 24 24">179 <path d="M12 2l6 6-6 14-6-14z"/>180 </svg>181 </div>182 <div class="icon-small">183 <!-- WiFi -->184 <svg viewBox="0 0 24 24">185 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M11 18l1 1 1-1"/>186 </svg>187 </div>188 <div class="icon-small">189 <!-- Battery -->190 <svg viewBox="0 0 28 24">191 <rect x="2" y="5" width="20" height="14" rx="2"></rect>192 <rect x="23" y="9" width="3" height="6" rx="1"></rect>193 <rect x="4" y="7" width="14" height="10" fill="#eaeaea" stroke="none"></rect>194 </svg>195 </div>196 </div>197 </div>198 199 <!-- Search Bar -->200 <div class="search-wrap">201 <div class="search-left">202 <div class="back">203 <svg viewBox="0 0 24 24">204 <path d="M15 6l-6 6 6 6"/>205 </svg>206 </div>207 <div class="query">Philadelphia</div>208 </div>209 <div class="search-right">210 <div class="circle-icon">211 <!-- Clear X -->212 <svg viewBox="0 0 24 24">213 <circle cx="12" cy="12" r="10" stroke="#9e9e9e"></circle>214 <path d="M8 8l8 8M16 8l-8 8"></path>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Results List -->221 <div class="results">222 223 <!-- Item 1 -->224 <div class="item">225 <div class="left-icon">226 <!-- Clock icon -->227 <svg viewBox="0 0 24 24">228 <circle cx="12" cy="12" r="8"></circle>229 <path d="M12 7v6l4 2"></path>230 </svg>231 </div>232 <div class="texts">233 <div class="title">Philadelphia</div>234 <div class="subtitle">PA, USA</div>235 </div>236 <div class="right-launch">237 <svg viewBox="0 0 24 24">238 <path d="M7 17l10-10M9 7h8v8"></path>239 </svg>240 </div>241 </div>242 <div class="divider"></div>243 244 <!-- Item 2 -->245 <div class="item">246 <div class="left-icon">247 <!-- Pin icon -->248 <svg viewBox="0 0 24 24">249 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>250 <circle cx="12" cy="10" r="3"></circle>251 </svg>252 </div>253 <div class="texts">254 <div class="title">Philadelphia International Airport</div>255 <div class="subtitle">Essington Ave, Philadelphia, PA, USA</div>256 </div>257 <div class="right-launch">258 <svg viewBox="0 0 24 24">259 <path d="M7 17l10-10M9 7h8v8"></path>260 </svg>261 </div>262 </div>263 <div class="divider"></div>264 265 <!-- Item 3 -->266 <div class="item">267 <div class="left-icon">268 <svg viewBox="0 0 24 24">269 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>270 <circle cx="12" cy="10" r="3"></circle>271 </svg>272 </div>273 <div class="texts">274 <div class="title">Philadelphia Museum of Art</div>275 <div class="subtitle">Benjamin Franklin Parkway, Philadelphia, PA, USA</div>276 </div>277 <div class="right-launch">278 <svg viewBox="0 0 24 24">279 <path d="M7 17l10-10M9 7h8v8"></path>280 </svg>281 </div>282 </div>283 <div class="divider"></div>284 285 <!-- Item 4 -->286 <div class="item">287 <div class="left-icon">288 <svg viewBox="0 0 24 24">289 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>290 <circle cx="12" cy="10" r="3"></circle>291 </svg>292 </div>293 <div class="texts">294 <div class="title">Philadelphia Zoo</div>295 <div class="subtitle">West Girard Avenue, Philadelphia, PA, USA</div>296 </div>297 <div class="right-launch">298 <svg viewBox="0 0 24 24">299 <path d="M7 17l10-10M9 7h8v8"></path>300 </svg>301 </div>302 </div>303 <div class="divider"></div>304 305 <!-- Item 5 -->306 <div class="item">307 <div class="left-icon">308 <svg viewBox="0 0 24 24">309 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>310 <circle cx="12" cy="10" r="3"></circle>311 </svg>312 </div>313 <div class="texts">314 <div class="title">Philadelphia's Magic Gardens</div>315 <div class="subtitle">South Street, Philadelphia, PA, USA</div>316 </div>317 <div class="right-launch">318 <svg viewBox="0 0 24 24">319 <path d="M7 17l10-10M9 7h8v8"></path>320 </svg>321 </div>322 </div>323 <div class="divider"></div>324 325 <!-- Item 6 -->326 <div class="item">327 <div class="left-icon">328 <svg viewBox="0 0 24 24">329 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>330 <circle cx="12" cy="10" r="3"></circle>331 </svg>332 </div>333 <div class="texts">334 <div class="title">Philadelphia Mills</div>335 <div class="subtitle">Franklin Mills Circle, Philadelphia, PA, USA</div>336 </div>337 <div class="right-launch">338 <svg viewBox="0 0 24 24">339 <path d="M7 17l10-10M9 7h8v8"></path>340 </svg>341 </div>342 </div>343 <div class="divider"></div>344 345 <!-- Item 7 -->346 <div class="item">347 <div class="left-icon">348 <svg viewBox="0 0 24 24">349 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>350 <circle cx="12" cy="10" r="3"></circle>351 </svg>352 </div>353 <div class="texts">354 <div class="title">Philadelphia Marriott Downtown</div>355 <div class="subtitle">Filbert Street, Philadelphia, PA, USA</div>356 </div>357 <div class="right-launch">358 <svg viewBox="0 0 24 24">359 <path d="M7 17l10-10M9 7h8v8"></path>360 </svg>361 </div>362 </div>363 <div class="divider"></div>364 365 </div>366 367 <!-- Floating Action Search -->368 <div class="fab">369 <svg viewBox="0 0 24 24">370 <circle cx="10" cy="10" r="6"></circle>371 <path d="M15 15l5 5"></path>372 </svg>373 </div>374 375 <!-- Keyboard -->376 <div class="keyboard">377 <div style="text-align:center; color:#d9d9d9; font-size:56px; margin-bottom:24px;">Philadelphia</div>378 <div class="kb-row">379 <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div>380 <div class="kb-key">t</div><div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div>381 <div class="kb-key">o</div><div class="kb-key">p</div>382 </div>383 <div class="kb-row">384 <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div>385 <div class="kb-key">g</div><div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div>386 <div class="kb-key">l</div><div class="kb-key">;</div>387 </div>388 <div class="kb-row short">389 <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div>390 <div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div><div class="kb-key">,</div>391 <div class="kb-key">⌫</div>392 </div>393 <div class="kb-row bottom">394 <div class="kb-key">?123</div>395 <div class="kb-key">,</div>396 <div class="kb-key">🙂</div>397 <div class="kb-key">.</div>398 <div class="kb-key space">Space</div>399 <div class="kb-key">.</div>400 <div class="kb-key">•</div>401 <div class="kb-key">🔍</div>402 </div>403 </div>404 405</div>406</body>407</html>