GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Philadelphia Search UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #121212;13 color: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #cfcfcf;29 font-size: 34px;30 letter-spacing: 0.2px;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .notif-dot {38 width: 24px;39 height: 24px;40 border-radius: 50%;41 background:#9e9e9e;42 opacity: .6;43 }44 .status-right {45 display: flex;46 align-items: center;47 gap: 24px;48 }49 .icon-bar {50 width: 34px; height: 34px; border-radius:4px; border:2px solid #9e9e9e; opacity:.7;51 }52 53 /* Search field */54 .search-wrap {55 position: absolute;56 top: 130px;57 left: 36px;58 width: 1008px;59 height: 118px;60 }61 .search-field {62 position: absolute;63 width: 100%;64 height: 118px;65 background: #EFEFEF;66 border-radius: 59px;67 box-shadow: 0 8px 18px rgba(0,0,0,.35);68 display: flex;69 align-items: center;70 padding: 0 150px 0 118px;71 box-sizing: border-box;72 color: #1c1c1c;73 font-size: 50px;74 font-weight: 600;75 }76 .back-btn, .clear-btn {77 position: absolute;78 top: 50%;79 transform: translateY(-50%);80 width: 92px; height: 92px;81 border-radius: 46px;82 display: flex; align-items:center; justify-content:center;83 }84 .back-btn { left: 10px; }85 .clear-btn { right: 10px; }86 .clear-btn {87 background: #E6E6E6;88 }89 90 /* Blue caret droplet above text */91 .caret-drop {92 position: absolute;93 top: -22px;94 left: 410px;95 width: 28px; height: 28px;96 background: #2b73ff;97 border-radius: 50% 50% 50% 0;98 transform: rotate(45deg);99 box-shadow: 0 2px 0 #2b73ff;100 }101 102 /* Action bubble */103 .action-bubble {104 position: absolute;105 top: 248px;106 left: 72px;107 width: 936px;108 height: 126px;109 background: #ffffff;110 color: #202020;111 border-radius: 64px;112 display: flex;113 align-items: center;114 padding: 0 48px;115 box-sizing: border-box;116 gap: 56px;117 box-shadow: 0 10px 24px rgba(0,0,0,.35);118 font-size: 40px;119 font-weight: 600;120 }121 .bubble-dot {122 margin-left: auto;123 width: 12px; height: 12px; background:#4c4c4c; border-radius:50%;124 box-shadow: 24px 0 0 #4c4c4c, 48px 0 0 #4c4c4c;125 }126 127 /* Results list */128 .results {129 position: absolute;130 top: 400px;131 left: 0;132 width: 1080px;133 }134 .row {135 position: relative;136 padding: 36px 130px 36px 140px;137 box-sizing: border-box;138 border-top: 1px solid #2a2a2a;139 border-bottom: 1px solid #1c1c1c;140 }141 .row-title {142 font-size: 48px;143 font-weight: 700;144 color: #f6f6f6;145 }146 .row-sub {147 font-size: 34px;148 color: #bcbcbc;149 margin-top: 10px;150 }151 .pin {152 position: absolute;153 left: 54px;154 top: 50%;155 transform: translateY(-50%);156 width: 64px; height: 64px;157 }158 .ne-arrow {159 position: absolute;160 right: 36px;161 top: 50%;162 transform: translateY(-50%);163 width: 56px; height: 56px;164 }165 166 /* Keyboard */167 .keyboard {168 position: absolute;169 left: 0;170 bottom: 96px;171 width: 1080px;172 height: 980px;173 background: #1d1d1f;174 box-shadow: 0 -12px 24px rgba(0,0,0,.5);175 border-top: 1px solid #2a2a2a;176 }177 .kb-header {178 height: 120px;179 display:flex; align-items:center; justify-content:center;180 color:#d9d9d9; font-size: 50px; font-weight: 700;181 }182 .kb-row {183 display:flex;184 justify-content: space-between;185 padding: 18px 28px;186 }187 .key {188 width: 92px; height: 110px;189 background: #2a2a2c;190 border-radius: 20px;191 color: #eaeaea;192 display:flex; align-items:center; justify-content:center;193 font-size: 46px;194 box-shadow: inset 0 -6px 0 rgba(255,255,255,.02);195 }196 .key.small { width: 120px; }197 .key.wide { width: 220px; }198 .space {199 flex: 1;200 height: 110px;201 margin: 0 18px;202 background: #2a2a2c;203 border-radius: 20px;204 }205 .circle-btn {206 width: 120px; height: 120px; border-radius: 60px;207 background:#2f2f31; display:flex; align-items:center; justify-content:center;208 margin: 12px;209 }210 .kb-bottom {211 display:flex; align-items:center; padding: 18px 22px;212 }213 .gesture {214 position: absolute;215 bottom: 24px;216 left: 50%;217 transform: translateX(-50%);218 width: 320px; height: 12px;219 background: #e7e7e7; border-radius: 6px;220 opacity: .9;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="status-bar">229 <div class="status-left">230 <div>10:59</div>231 <div class="notif-dot"></div>232 <div class="notif-dot"></div>233 <div class="notif-dot"></div>234 <div class="notif-dot"></div>235 <div style="width:10px;"></div>236 <div class="notif-dot" style="width:10px;height:10px;opacity:.4;"></div>237 </div>238 <div class="status-right">239 <div class="icon-bar"></div>240 <div class="icon-bar"></div>241 <div class="icon-bar"></div>242 </div>243 </div>244 245 <!-- Search field -->246 <div class="search-wrap">247 <div class="back-btn">248 <svg viewBox="0 0 24 24" width="56" height="56">249 <path d="M15 5 L7 12 L15 19" fill="none" stroke="#3c3c3c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 <div class="search-field">253 Philadelphia254 <div class="caret-drop"></div>255 </div>256 <div class="clear-btn">257 <svg viewBox="0 0 24 24" width="56" height="56">258 <circle cx="12" cy="12" r="11" fill="none" stroke="#6d6d6d" stroke-width="2"/>259 <path d="M8 8 L16 16 M16 8 L8 16" stroke="#6d6d6d" stroke-width="2" stroke-linecap="round"/>260 </svg>261 </div>262 </div>263 264 <!-- Action bubble under selection -->265 <div class="action-bubble">266 <div>Paste</div>267 <div>Select all</div>268 <div>Paste as plain text</div>269 <div class="bubble-dot"></div>270 </div>271 272 <!-- Results list -->273 <div class="results">274 <div class="row">275 <svg class="pin" viewBox="0 0 24 24">276 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>277 </svg>278 <div class="row-title">Philadelphia International Airport...</div>279 <div class="row-sub">Essington Ave, Philadelphia, PA, USA</div>280 <svg class="ne-arrow" viewBox="0 0 24 24">281 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>282 </svg>283 </div>284 285 <div class="row">286 <svg class="pin" viewBox="0 0 24 24">287 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>288 </svg>289 <div class="row-title">Philadelphia Museum of Art</div>290 <div class="row-sub">Benjamin Franklin Parkway, Philadelphia, PA</div>291 <svg class="ne-arrow" viewBox="0 0 24 24">292 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>293 </svg>294 </div>295 296 <div class="row">297 <svg class="pin" viewBox="0 0 24 24">298 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>299 </svg>300 <div class="row-title">Philadelphia Zoo</div>301 <div class="row-sub">West Girard Avenue, Philadelphia, PA, USA</div>302 <svg class="ne-arrow" viewBox="0 0 24 24">303 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 307 <div class="row">308 <svg class="pin" viewBox="0 0 24 24">309 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>310 </svg>311 <div class="row-title">Philadelphia Mills</div>312 <div class="row-sub">Franklin Mills Circle, Philadelphia, PA, USA</div>313 <svg class="ne-arrow" viewBox="0 0 24 24">314 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>315 </svg>316 </div>317 318 <div class="row">319 <svg class="pin" viewBox="0 0 24 24">320 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>321 </svg>322 <div class="row-title">Philadelphia Premium Outlets</div>323 <div class="row-sub">Lightcap Road, Pottstown, PA, USA</div>324 <svg class="ne-arrow" viewBox="0 0 24 24">325 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>326 </svg>327 </div>328 329 <div class="row">330 <svg class="pin" viewBox="0 0 24 24">331 <path d="M12 2c-4.4 0-8 3.6-8 8 0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#bdbdbd"/>332 </svg>333 <div class="row-title">Philadelphia's Magic Gardens</div>334 <div class="row-sub">South Street, Philadelphia, PA, USA</div>335 <svg class="ne-arrow" viewBox="0 0 24 24">336 <path d="M7 17 L17 7 M10 7 H17 V14" fill="none" stroke="#cfcfcf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>337 </svg>338 </div>339 </div>340 341 <!-- Keyboard -->342 <div class="keyboard">343 <div class="kb-header">Philadelphia</div>344 345 <div class="kb-row">346 <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>347 </div>348 <div class="kb-row" style="padding-left:78px; padding-right:78px;">349 <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>350 </div>351 <div class="kb-row" style="padding-left:140px; padding-right:140px;">352 <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>353 </div>354 355 <div class="kb-bottom">356 <div class="key small">?123</div>357 <div class="key small">,</div>358 <div class="key small">359 <svg viewBox="0 0 24 24" width="38" height="38">360 <path d="M12 4c3 0 5 2.5 5 5.5v4.5c0 2.5-2 4.5-5 4.5s-5-2-5-4.5V9.5C7 6.5 9 4 12 4z" fill="#eaeaea"/>361 <rect x="10" y="18" width="4" height="4" fill="#eaeaea"/>362 </svg>363 </div>364 <div class="space"></div>365 <div class="key small">.</div>366 <div class="circle-btn">367 <svg viewBox="0 0 24 24" width="46" height="46">368 <circle cx="11" cy="11" r="8" fill="none" stroke="#eaeaea" stroke-width="2"/>369 <line x1="17" y1="17" x2="22" y2="22" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 </div>373 </div>374 375 <div class="gesture"></div>376</div>377</body>378</html>