GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Philadelphia Search Results UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 background: #fff;23 color: #222;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 }29 .status-left { font-size: 38px; font-weight: 600; }30 .status-right {31 margin-left: auto;32 display: flex;33 gap: 26px;34 align-items: center;35 }36 .status-dot {37 width: 28px; height: 28px; background: #2b2b2b; border-radius: 50%;38 opacity: 0.35;39 }40 .status-shield {41 width: 34px; height: 34px; border-radius: 6px; border: 2px solid #2b2b2b;42 opacity: 0.6;43 }44 45 /* Search header */46 .search-header {47 position: absolute;48 top: 110px;49 left: 0;50 width: 1080px;51 height: 170px;52 box-sizing: border-box;53 padding: 22px 36px;54 background: #fff;55 }56 .search-row {57 display: flex;58 align-items: center;59 gap: 26px;60 }61 .icon-circle {62 width: 84px; height: 84px; border-radius: 42px; border: 2px solid #d7d7d7;63 display: flex; align-items: center; justify-content: center;64 background: #f7f7f7;65 }66 .icon-circle svg { width: 42px; height: 42px; fill: #444; }67 .search-pill {68 flex: 1;69 height: 96px;70 border-radius: 48px;71 border: 2px solid #E0E0E0;72 background: #fff;73 display: flex;74 align-items: center;75 padding: 0 34px;76 box-sizing: border-box;77 font-size: 44px;78 color: #111;79 }80 .search-text { flex: 1; }81 .clear-btn {82 width: 64px; height: 64px; border-radius: 32px; background: #efefef;83 display: flex; align-items: center; justify-content: center;84 margin-left: 18px;85 }86 .clear-btn svg { width: 30px; height: 30px; stroke: #444; stroke-width: 6; }87 88 /* Results list */89 .results {90 position: absolute;91 top: 280px; /* below search header */92 left: 0;93 width: 1080px;94 height: 1100px; /* remaining visible area above keyboard */95 overflow: hidden;96 background: #fff;97 }98 .result-item {99 display: flex;100 align-items: center;101 padding: 24px 36px;102 box-sizing: border-box;103 border-top: 1px solid #eee;104 }105 .result-item:first-child { border-top: none; }106 .result-icon {107 width: 72px; height: 72px; border-radius: 36px; border: 2px solid #E0E0E0;108 display: flex; align-items: center; justify-content: center;109 background: #fafafa; margin-right: 26px;110 }111 .result-icon svg { width: 38px; height: 38px; fill: #666; }112 .result-content { flex: 1; }113 .result-title {114 font-size: 48px; color: #1c1c1c; font-weight: 700; line-height: 1.2;115 }116 .result-sub {117 font-size: 34px; color: #757575; margin-top: 8px;118 }119 .result-arrow {120 width: 52px; height: 52px; border-radius: 26px; border: 2px solid #E0E0E0;121 display: flex; align-items: center; justify-content: center; margin-left: 18px;122 }123 .result-arrow svg { width: 28px; height: 28px; fill: #444; }124 125 /* Keyboard */126 .keyboard {127 position: absolute;128 bottom: 0;129 left: 0;130 width: 1080px;131 height: 1020px;132 background: #1f1f1f;133 color: #f5f5f5;134 box-shadow: 0 -8px 20px rgba(0,0,0,0.2);135 }136 .kb-top {137 height: 110px; display: flex; align-items: center; padding: 0 36px;138 box-sizing: border-box; color: #dcdcdc;139 }140 .kb-left-icon, .kb-right-icon {141 width: 70px; height: 70px; background: #2a2a2a; border-radius: 18px;142 display: flex; align-items: center; justify-content: center;143 }144 .kb-title { flex: 1; text-align: center; font-size: 46px; }145 .kb-row {146 display: flex; gap: 12px; padding: 14px 26px; box-sizing: border-box;147 justify-content: center;148 }149 .key {150 background: #2a2a2a;151 border: 1px solid #3a3a3a;152 color: #f1f1f1;153 border-radius: 18px;154 width: 86px; height: 120px;155 display: flex; align-items: center; justify-content: center;156 font-size: 46px;157 }158 .key.wide { width: 160px; }159 .key.space { flex: 1; height: 120px; min-width: 320px; }160 .key.icon svg { width: 42px; height: 42px; fill: #f1f1f1; }161 .home-indicator {162 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);163 width: 420px; height: 12px; background: #dddddd; border-radius: 8px; opacity: 0.7;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status bar -->171 <div class="status-bar">172 <div class="status-left">10:59</div>173 <div class="status-right">174 <div class="status-dot"></div>175 <div class="status-dot"></div>176 <div class="status-dot"></div>177 <div class="status-dot"></div>178 <div class="status-dot"></div>179 <div class="status-shield"></div>180 </div>181 </div>182 183 <!-- Search header -->184 <div class="search-header">185 <div class="search-row">186 <div class="icon-circle">187 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>188 </div>189 <div class="search-pill">190 <div class="search-text">Philadelphia</div>191 <div class="clear-btn">192 <svg viewBox="0 0 24 24">193 <line x1="5" y1="5" x2="19" y2="19"></line>194 <line x1="19" y1="5" x2="5" y2="19"></line>195 </svg>196 </div>197 </div>198 </div>199 </div>200 201 <!-- Results list -->202 <div class="results">203 <div class="result-item">204 <div class="result-icon">205 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>206 </div>207 <div class="result-content">208 <div class="result-title">Philadelphia</div>209 <div class="result-sub">PA, USA</div>210 </div>211 <div class="result-arrow">212 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>213 </div>214 </div>215 216 <div class="result-item">217 <div class="result-icon">218 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>219 </div>220 <div class="result-content">221 <div class="result-title">Philadelphia International Airport</div>222 <div class="result-sub">Essington Ave, Philadelphia, PA, USA</div>223 </div>224 <div class="result-arrow">225 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>226 </div>227 </div>228 229 <div class="result-item">230 <div class="result-icon">231 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>232 </div>233 <div class="result-content">234 <div class="result-title">Philadelphia Museum of Art</div>235 <div class="result-sub">Benjamin Franklin Parkway, Philadelphia, PA, USA</div>236 </div>237 <div class="result-arrow">238 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>239 </div>240 </div>241 242 <div class="result-item">243 <div class="result-icon">244 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>245 </div>246 <div class="result-content">247 <div class="result-title">Philadelphia Zoo</div>248 <div class="result-sub">West Girard Avenue, Philadelphia, PA, USA</div>249 </div>250 <div class="result-arrow">251 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>252 </div>253 </div>254 255 <div class="result-item">256 <div class="result-icon">257 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>258 </div>259 <div class="result-content">260 <div class="result-title">Philadelphia Mills</div>261 <div class="result-sub">Franklin Mills Circle, Philadelphia, PA, USA</div>262 </div>263 <div class="result-arrow">264 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>265 </div>266 </div>267 268 <div class="result-item">269 <div class="result-icon">270 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>271 </div>272 <div class="result-content">273 <div class="result-title">Philadelphia Premium Outlets</div>274 <div class="result-sub">Lightcap Road, Pottstown, PA, USA</div>275 </div>276 <div class="result-arrow">277 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>278 </div>279 </div>280 281 <div class="result-item">282 <div class="result-icon">283 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 017-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>284 </div>285 <div class="result-content">286 <div class="result-title">Philadelphia's Magic Gardens</div>287 <div class="result-sub">South Street, Philadelphia, PA, USA</div>288 </div>289 <div class="result-arrow">290 <svg viewBox="0 0 24 24"><path d="M8 16l6-6v5h2V8H9v2h5l-6 6z"/></svg>291 </div>292 </div>293 </div>294 295 <!-- Keyboard -->296 <div class="keyboard">297 <div class="kb-top">298 <div class="kb-left-icon">299 <svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/></svg>300 </div>301 <div class="kb-title">Philadelphia</div>302 <div class="kb-right-icon">303 <svg viewBox="0 0 24 24"><path d="M12 3a7 7 0 00-7 7c0 3.9 3.1 7 7 7 1.4 0 2.7-.4 3.8-1l4.2 4.2 1.4-1.4-4.2-4.2c.6-1.1 1-2.4 1-3.8a7 7 0 00-7-7zm0 2a5 5 0 110 10 5 5 0 010-10z"/></svg>304 </div>305 </div>306 307 <div class="kb-row">308 <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>309 <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>310 </div>311 <div class="kb-row">312 <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>313 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>314 </div>315 <div class="kb-row">316 <div class="key wide icon">317 <svg viewBox="0 0 24 24"><path d="M4 15h16l-7 7-2-2 3-3H4v-2zm0-6h16l-7-7-2 2 3 3H4v2z"/></svg>318 </div>319 <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>320 <div class="key">n</div><div class="key">m</div>321 <div class="key wide icon">322 <svg viewBox="0 0 24 24"><path d="M6 19l12-12-1.5-1.5L4.5 17.5 6 19zM18 7l-1-1 2-2 1 1-2 2z"/></svg>323 </div>324 </div>325 <div class="kb-row">326 <div class="key wide">?123</div>327 <div class="key">,</div>328 <div class="key wide icon">329 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8"/></svg>330 </div>331 <div class="key space"></div>332 <div class="key">.</div>333 <div class="key wide icon">334 <svg viewBox="0 0 24 24"><path d="M15.5 14h-7l-1.5 4h11l-1.5-4zm-1.5-9h-4l1 7h2l1-7z"/></svg>335 </div>336 </div>337 338 <div class="home-indicator"></div>339 </div>340 341</div>342</body>343</html>