GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Choose start location UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* Status bar */17 .statusbar {18 height: 90px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #222;24 font-size: 34px;25 }26 .status-left { display: flex; align-items: center; gap: 18px; }27 .status-center { color: #777; letter-spacing: 4px; font-size: 28px; }28 .status-right { display: flex; align-items: center; gap: 22px; }29 .sb-icon { width: 34px; height: 34px; }30 31 /* Search header */32 .header {33 padding: 18px 24px 12px 24px;34 }35 .search-row {36 display: flex;37 align-items: center;38 gap: 20px;39 }40 .back-btn {41 width: 72px;42 height: 72px;43 border-radius: 36px;44 display: flex; align-items: center; justify-content: center;45 }46 .search-bar {47 flex: 1;48 height: 96px;49 border: 1px solid #DADCE0;50 border-radius: 48px;51 display: flex;52 align-items: center;53 padding: 0 24px;54 color: #5F6368;55 font-size: 36px;56 }57 .search-text { flex: 1; }58 .mic {59 width: 52px; height: 52px;60 border-radius: 26px;61 display: flex; align-items: center; justify-content: center;62 }63 64 /* List */65 .list {66 margin-top: 12px;67 }68 .item {69 display: flex; align-items: center;70 padding: 28px 32px;71 border-bottom: 1px solid #E6E6E6;72 }73 .icon-wrap {74 width: 64px; height: 64px;75 border-radius: 32px;76 display: flex; align-items: center; justify-content: center;77 margin-right: 28px;78 }79 .icon-wrap.blue { background: #E8F0FE; }80 .icon-wrap.gray { background: #F1F3F4; }81 .item-text { flex: 1; }82 .title { font-size: 40px; color: #202124; }83 .subtitle { font-size: 30px; color: #6B6F73; margin-top: 6px; }84 .divider-thick {85 height: 14px;86 background: #F1F3F4;87 border-bottom: 1px solid #E6E6E6;88 }89 90 /* Keyboard (dark) */91 .keyboard {92 position: absolute;93 left: 0; right: 0; bottom: 40px;94 background: #1F2125;95 height: 820px;96 border-top-left-radius: 22px;97 border-top-right-radius: 22px;98 box-shadow: 0 -2px 8px rgba(0,0,0,0.2);99 color: #EDEDED;100 display: flex;101 flex-direction: column;102 }103 .kb-topbar {104 height: 110px;105 padding: 0 30px;106 display: flex;107 align-items: center;108 gap: 36px;109 }110 .kb-pill {111 min-width: 82px;112 height: 62px;113 background: #2B2D31;114 border-radius: 12px;115 display: flex; align-items: center; justify-content: center;116 font-size: 28px;117 color: #F5F5F5;118 padding: 0 14px;119 }120 .kb-rows {121 flex: 1;122 padding: 10px 30px 20px 30px;123 }124 .row {125 display: flex;126 justify-content: center;127 gap: 16px;128 margin-bottom: 18px;129 }130 .key {131 width: 92px;132 height: 110px;133 background: #2B2D31;134 border-radius: 16px;135 display: flex; align-items: center; justify-content: center;136 font-size: 42px;137 color: #FAFAFA;138 }139 .key.wide { width: 140px; }140 .space { flex: 1; min-width: 420px; }141 .circle-key {142 width: 96px; height: 96px; border-radius: 48px;143 background: #CFE0F8;144 display: flex; align-items: center; justify-content: center;145 color: #1A73E8;146 }147 148 /* Home indicator */149 .home-indicator {150 position: absolute;151 bottom: 10px; left: 50%; transform: translateX(-50%);152 width: 340px; height: 10px; border-radius: 6px; background: #D8D8D8;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status bar -->160 <div class="statusbar">161 <div class="status-left">10:58</div>162 <div class="status-center">• • • • •</div>163 <div class="status-right">164 <!-- Location icon -->165 <svg class="sb-icon" viewBox="0 0 24 24">166 <path fill="#444" d="M12 2a7 7 0 0 0-7 7c0 5.5 7 13 7 13s7-7.5 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>167 </svg>168 <!-- Bell off -->169 <svg class="sb-icon" viewBox="0 0 24 24">170 <path fill="#444" d="M3 4l17 17-1.5 1.5L1.5 5.5 3 4zm18.5 9c0 1.2-2.5 2.2-5 2.5L6 7.9c.6-3 2.9-4.9 6-4.9 3.3 0 6 2.7 6 6v2zM12 22a2.5 2.5 0 0 0 2.3-1.6L12 18.1l-2.3 2.3A2.5 2.5 0 0 0 12 22z"/>171 </svg>172 <!-- Wi-Fi -->173 <svg class="sb-icon" viewBox="0 0 24 24">174 <path fill="#444" d="M2 8a14 14 0 0 1 20 0l-1.5 1.6a12 12 0 0 0-17 0L2 8zm4 4a9 9 0 0 1 12 0l-1.5 1.6a7 7 0 0 0-9 0L6 12zm6 6 2.2-2.2a3 3 0 0 0-4.4 0L12 18z"/>175 </svg>176 <!-- Battery -->177 <svg class="sb-icon" viewBox="0 0 24 24">178 <rect x="2" y="6" width="16" height="12" rx="2" fill="#444"></rect>179 <rect x="18" y="10" width="3" height="4" fill="#444"></rect>180 <rect x="4" y="8" width="12" height="8" fill="#76C043"></rect>181 </svg>182 </div>183 </div>184 185 <!-- Search header -->186 <div class="header">187 <div class="search-row">188 <div class="back-btn">189 <svg width="36" height="36" viewBox="0 0 24 24">190 <path d="M15 5 8 12l7 7" stroke="#5F6368" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>191 </svg>192 </div>193 <div class="search-bar">194 <div class="search-text">Choose start location</div>195 <div class="mic">196 <svg width="28" height="28" viewBox="0 0 24 24">197 <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 8a5 5 0 0 0 10 0M12 16v3" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round"></path>198 </svg>199 </div>200 </div>201 </div>202 </div>203 204 <!-- List content -->205 <div class="list">206 <div class="item">207 <div class="icon-wrap blue">208 <svg width="36" height="36" viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="7" stroke="#1A73E8" stroke-width="2" fill="none"></circle>210 <circle cx="12" cy="12" r="2.5" fill="#1A73E8"></circle>211 </svg>212 </div>213 <div class="item-text">214 <div class="title">Your location</div>215 </div>216 </div>217 218 <div class="item">219 <div class="icon-wrap gray">220 <svg width="36" height="36" viewBox="0 0 24 24">221 <path d="M12 2c-4 0-6 3-6 7 0 6 6 11 6 11s6-5 6-11c0-4-2-7-6-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#5F6368"></path>222 </svg>223 </div>224 <div class="item-text">225 <div class="title">Choose on map</div>226 </div>227 </div>228 229 <div class="divider-thick"></div>230 231 <div class="item">232 <div class="icon-wrap gray">233 <svg width="36" height="36" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="8" stroke="#6B6F73" stroke-width="2" fill="none"></circle>235 <path d="M12 7v5l3 2" stroke="#6B6F73" stroke-width="2" fill="none" stroke-linecap="round"></path>236 </svg>237 </div>238 <div class="item-text">239 <div class="title">Dawson Creek</div>240 <div class="subtitle">BC, Canada</div>241 </div>242 </div>243 244 <div class="item">245 <div class="icon-wrap gray">246 <svg width="36" height="36" viewBox="0 0 24 24">247 <circle cx="12" cy="12" r="8" stroke="#6B6F73" stroke-width="2" fill="none"></circle>248 <path d="M12 7v5l3 2" stroke="#6B6F73" stroke-width="2" fill="none" stroke-linecap="round"></path>249 </svg>250 </div>251 <div class="item-text">252 <div class="title">Pouce Coupe Museum</div>253 <div class="subtitle">49th Avenue, Pouce Coupe, BC, Canada</div>254 </div>255 </div>256 257 <div class="item">258 <div class="icon-wrap gray">259 <svg width="36" height="36" viewBox="0 0 24 24">260 <circle cx="12" cy="12" r="8" stroke="#6B6F73" stroke-width="2" fill="none"></circle>261 <path d="M12 7v5l3 2" stroke="#6B6F73" stroke-width="2" fill="none" stroke-linecap="round"></path>262 </svg>263 </div>264 <div class="item-text">265 <div class="title">1100 Alaska Avenue</div>266 <div class="subtitle">Dawson Creek, BC, Canada</div>267 </div>268 </div>269 270 <div class="item">271 <div class="icon-wrap gray">272 <svg width="36" height="36" viewBox="0 0 24 24">273 <circle cx="12" cy="12" r="8" stroke="#6B6F73" stroke-width="2" fill="none"></circle>274 <path d="M12 7v5l3 2" stroke="#6B6F73" stroke-width="2" fill="none" stroke-linecap="round"></path>275 </svg>276 </div>277 <div class="item-text">278 <div class="title">South Peace Community Arts Council</div>279 <div class="subtitle">Alaska Avenue, Dawson Creek, BC, Canada</div>280 </div>281 </div>282 283 <div class="item">284 <div class="icon-wrap gray">285 <svg width="36" height="36" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="8" stroke="#6B6F73" stroke-width="2" fill="none"></circle>287 <path d="M12 7v5l3 2" stroke="#6B6F73" stroke-width="2" fill="none" stroke-linecap="round"></path>288 </svg>289 </div>290 <div class="item-text">291 <div class="title">933-927 British Columbia 97</div>292 <div class="subtitle">Dawson Creek, BC, Canada</div>293 </div>294 </div>295 </div>296 297 <!-- Keyboard -->298 <div class="keyboard">299 <div class="kb-topbar">300 <div class="kb-pill">301 <svg width="28" height="28" viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="9" fill="none" stroke="#EDEDED" stroke-width="2"></circle>303 <circle cx="9" cy="10" r="1.6" fill="#EDEDED"></circle>304 <circle cx="15" cy="10" r="1.6" fill="#EDEDED"></circle>305 <path d="M8 14c2.5 2.2 5.5 2.2 8 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"></path>306 </svg>307 </div>308 <div class="kb-pill">GIF</div>309 <div class="kb-pill">310 <svg width="28" height="28" viewBox="0 0 24 24">311 <circle cx="12" cy="12" r="9" stroke="#EDEDED" stroke-width="2" fill="none"></circle>312 <circle cx="12" cy="12" r="3" fill="#EDEDED"></circle>313 </svg>314 </div>315 <div class="kb-pill">316 <svg width="28" height="28" viewBox="0 0 24 24">317 <path d="M4 6h8v4H4zm0 8h12v4H4z" fill="#EDEDED"></path>318 </svg>319 </div>320 <div class="kb-pill">321 <svg width="28" height="28" viewBox="0 0 24 24">322 <rect x="3" y="3" width="18" height="14" rx="2" fill="#EDEDED"></rect>323 <rect x="3" y="18" width="18" height="3" rx="1.5" fill="#EDEDED"></rect>324 </svg>325 </div>326 <div class="kb-pill">327 <svg width="28" height="28" viewBox="0 0 24 24">328 <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 8a5 5 0 0 0 10 0" stroke="#EDEDED" stroke-width="2" fill="none"></path>329 </svg>330 </div>331 </div>332 333 <div class="kb-rows">334 <div class="row">335 <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>336 <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>337 </div>338 <div class="row">339 <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>340 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>341 </div>342 <div class="row">343 <div class="key wide">⇧</div>344 <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>345 <div class="key wide">346 <svg width="34" height="34" viewBox="0 0 24 24">347 <path d="M16 8l-6 6m0-6l6 6" stroke="#FAFAFA" stroke-width="2" fill="none" stroke-linecap="round"></path>348 </svg>349 </div>350 </div>351 <div class="row">352 <div class="circle-key">?123</div>353 <div class="key">☺</div>354 <div class="key">,</div>355 <div class="key space"></div>356 <div class="key">.</div>357 <div class="key">358 <svg width="30" height="30" viewBox="0 0 24 24">359 <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 8a5 5 0 0 0 10 0" stroke="#FAFAFA" stroke-width="2" fill="none"></path>360 </svg>361 </div>362 <div class="circle-key">363 <svg width="32" height="32" viewBox="0 0 24 24">364 <circle cx="11" cy="11" r="8" stroke="#1A73E8" stroke-width="2" fill="none"></circle>365 <path d="M20 20l-3-3" stroke="#1A73E8" stroke-width="2" stroke-linecap="round"></path>366 </svg>367 </div>368 </div>369 </div>370 </div>371 372 <div class="home-indicator"></div>373</div>374</body>375</html>