GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Map Search UI</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; position:relative; overflow:hidden;9 background:#dfe6ed;10 border-radius:24px;11 box-shadow: 0 10px 40px rgba(0,0,0,0.25);12 }13 14 /* Map background placeholder */15 .map-bg{16 position:absolute; inset:0;17 background:#E0E0E0;18 border:1px solid #BDBDBD;19 display:flex; align-items:center; justify-content:center;20 color:#757575; font-size:36px; letter-spacing:1px;21 }22 23 /* Status bar */24 .status-bar{25 position:absolute; top:0; left:0; width:100%; height:100px; padding:0 28px;26 display:flex; align-items:center; justify-content:space-between;27 color:#0b0b0b; font-weight:600; font-size:34px;28 background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0));29 }30 .status-right{ display:flex; gap:26px; align-items:center; color:#222; }31 .dot{ width:10px; height:10px; background:#2e2e2e; border-radius:50%; opacity:.7; }32 .sb-icon{33 width:36px; height:36px; background:#2e2e2e; border-radius:6px; opacity:.7;34 }35 36 /* Start marker on map */37 .start-pin{38 position:absolute; top:170px; left:520px;39 background:#2ecc71; color:#fff; padding:10px 20px;40 border-radius:12px;41 font-size:28px; font-weight:700;42 box-shadow:0 4px 10px rgba(0,0,0,0.2);43 }44 45 /* Back circular button */46 .back-circle{47 position:absolute; top:130px; left:30px;48 width:96px; height:96px; border-radius:50%;49 background:#ffffff; box-shadow:0 6px 20px rgba(0,0,0,.2);50 display:flex; align-items:center; justify-content:center;51 }52 .back-circle svg{ width:40px; height:40px; fill:none; stroke:#333; stroke-width:8; }53 54 /* Search bar */55 .search-bar{56 position:absolute; top:120px; left:136px; width:914px; height:120px;57 background:#ffffff; border-radius:24px;58 box-shadow:0 8px 24px rgba(0,0,0,0.18);59 display:flex; align-items:center; padding:0 24px;60 gap:18px;61 }62 .icon{63 width:42px; height:42px;64 }65 .icon svg{ width:100%; height:100%; fill:none; stroke:#3c3c3c; stroke-width:6; }66 .input-area{67 flex:1;68 display:flex; align-items:center; gap:20px; overflow:hidden;69 }70 .start-label{ color:#1a73e8; font-weight:700; font-size:36px; }71 .typed{ font-size:40px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }72 .close-btn{ width:54px; height:54px; border-radius:50%; background:#eef2f6; display:flex; align-items:center; justify-content:center; }73 .close-btn svg{ width:26px; height:26px; stroke:#4a4a4a; stroke-width:8; }74 75 /* Results card */76 .results-card{77 position:absolute; left:30px; top:320px; width:1020px; height:1080px;78 background:#ffffff; border-radius:28px; box-shadow:0 10px 28px rgba(0,0,0,.18);79 overflow:hidden; display:flex; flex-direction:column;80 }81 .results-header{82 padding:30px 34px 16px; border-bottom:1px solid #ececec;83 display:flex; align-items:center; justify-content:space-between;84 }85 .results-title{ font-size:44px; color:#0d2441; font-weight:800; }86 .show-on-map{87 display:flex; align-items:center; gap:14px; padding:12px 18px;88 border-radius:18px; background:#eef6ff; color:#1a73e8; font-weight:700; font-size:28px;89 }90 .show-on-map .mini{91 width:36px; height:36px; background:#d0e6ff; border-radius:10px;92 }93 94 .result{95 display:flex; align-items:center; gap:28px; padding:30px 34px;96 border-bottom:1px solid #f0f0f0;97 }98 .pin{99 width:54px; height:54px; border-radius:14px; background:#e9eef3; display:flex; align-items:center; justify-content:center;100 }101 .pin svg{ width:30px; height:30px; fill:#5a6b7f; }102 .r-text{ flex:1; }103 .r-title{ font-size:38px; color:#142b4a; font-weight:800; }104 .r-sub{ font-size:28px; color:#5b6b7a; margin-top:6px; }105 106 .arrow{107 width:44px; height:44px; border-radius:12px; background:#f1f4f7; display:flex; align-items:center; justify-content:center;108 }109 .arrow svg{ width:24px; height:24px; fill:none; stroke:#5b6b7a; stroke-width:8; }110 111 .powered{112 margin-top:auto;113 padding:24px 34px;114 color:#7d7d7d; font-size:28px;115 display:flex; align-items:center; gap:12px;116 background:#fff;117 }118 .g-badge{119 padding:4px 10px; border-radius:8px; background:#f4f4f4; color:#555; font-weight:700;120 border:1px solid #e0e0e0;121 }122 123 /* Keyboard */124 .keyboard{125 position:absolute; bottom:0; left:0; width:100%; height:820px;126 background:#0e0f10; border-top-left-radius:22px; border-top-right-radius:22px;127 box-shadow:0 -6px 24px rgba(0,0,0,.4);128 padding:24px 22px;129 display:flex; flex-direction:column; gap:20px;130 }131 .kb-topbar{132 display:flex; justify-content:flex-end; color:#9fdcdf; font-size:46px; font-weight:700; padding:6px 10px;133 }134 .keys-row{135 display:flex; gap:18px; justify-content:space-between;136 }137 .key{138 flex:1;139 height:112px; background:#1f2226; border-radius:22px; color:#e9eef3; display:flex; align-items:center; justify-content:center;140 font-size:44px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);141 }142 .key.wide{ flex:2.2; }143 .key.extra-wide{ flex:5; }144 .key.small{ flex:.9; }145 .bottom-row{ display:flex; gap:18px; }146</style>147</head>148<body>149<div id="render-target">150 151 <div class="map-bg">[IMG: Google Map]</div>152 153 <div class="status-bar">154 <div>7:41</div>155 <div class="status-right">156 <div class="sb-icon"></div>157 <div class="sb-icon"></div>158 <div class="dot"></div>159 <div class="sb-icon"></div>160 </div>161 </div>162 163 <div class="start-pin">Start</div>164 165 <div class="back-circle">166 <svg viewBox="0 0 24 24">167 <path d="M15 5 L7 12 L15 19" />168 </svg>169 </div>170 171 <div class="search-bar">172 <div class="icon">173 <svg viewBox="0 0 24 24">174 <circle cx="10" cy="10" r="7"></circle>175 <line x1="15" y1="15" x2="22" y2="22"></line>176 </svg>177 </div>178 <div class="input-area">179 <div class="start-label">Start</div>180 <div class="typed">Upper East Side</div>181 </div>182 <div class="close-btn">183 <svg viewBox="0 0 24 24">184 <line x1="5" y1="5" x2="19" y2="19"></line>185 <line x1="19" y1="5" x2="5" y2="19"></line>186 </svg>187 </div>188 </div>189 190 <div class="results-card">191 <div class="results-header">192 <div class="results-title">Results</div>193 <div class="show-on-map">194 <div class="mini"></div>195 <div>Show on Map</div>196 </div>197 </div>198 199 <div class="result">200 <div class="pin">201 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>202 </div>203 <div class="r-text">204 <div class="r-title">Upper East Side</div>205 <div class="r-sub">Manhattan, New York, NY, USA</div>206 </div>207 <div class="arrow">208 <svg viewBox="0 0 24 24">209 <path d="M7 17 L17 7 M10 7h7v7"/>210 </svg>211 </div>212 </div>213 214 <div class="result">215 <div class="pin">216 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>217 </div>218 <div class="r-text">219 <div class="r-title">Upper East Side Rehabilitation and Nursing Center</div>220 <div class="r-sub">East 79th Street, New York, NY, USA</div>221 </div>222 <div class="arrow">223 <svg viewBox="0 0 24 24">224 <path d="M7 17 L17 7 M10 7h7v7"/>225 </svg>226 </div>227 </div>228 229 <div class="result">230 <div class="pin">231 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>232 </div>233 <div class="r-text">234 <div class="r-title">Upper East Side Gynecology</div>235 <div class="r-sub">East 84th Street, New York, NY, USA</div>236 </div>237 <div class="arrow">238 <svg viewBox="0 0 24 24">239 <path d="M7 17 L17 7 M10 7h7v7"/>240 </svg>241 </div>242 </div>243 244 <div class="result">245 <div class="pin">246 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>247 </div>248 <div class="r-text">249 <div class="r-title">Upper East Side Dentist - Sherwin Benlevi DDS PC</div>250 <div class="r-sub">3rd Avenue, New York, NY, USA</div>251 </div>252 <div class="arrow">253 <svg viewBox="0 0 24 24">254 <path d="M7 17 L17 7 M10 7h7v7"/>255 </svg>256 </div>257 </div>258 259 <div class="result">260 <div class="pin">261 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>262 </div>263 <div class="r-text">264 <div class="r-title">Upper East Side Tan - UV & Spray Tanning</div>265 <div class="r-sub">East 58th Street, New York, NY, USA</div>266 </div>267 <div class="arrow">268 <svg viewBox="0 0 24 24">269 <path d="M7 17 L17 7 M10 7h7v7"/>270 </svg>271 </div>272 </div>273 274 <div class="powered">275 <span>powered by</span>276 <span class="g-badge">Google</span>277 </div>278 </div>279 280 <!-- Keyboard -->281 <div class="keyboard">282 <div class="kb-topbar">Side</div>283 284 <div class="keys-row">285 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div>286 <div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div>287 <div class="key">O</div><div class="key">P</div>288 </div>289 <div class="keys-row">290 <div class="key small">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div>291 <div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div>292 <div class="key">L</div>293 </div>294 <div class="keys-row">295 <div class="key small">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>296 <div class="key">B</div><div class="key">N</div><div class="key">M</div>297 <div class="key wide">⌫</div>298 </div>299 <div class="bottom-row">300 <div class="key small">?123</div>301 <div class="key">,</div>302 <div class="key extra-wide">Space</div>303 <div class="key">.</div>304 <div class="key wide">⌕</div>305 </div>306 </div>307 308</div>309</body>310</html>