GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Find Location UI</title>7<style>8 :root {9 --bg: #222a2f;10 --card: #2b3237;11 --text: #e7eef2;12 --muted: #bfc7cd;13 --line: #384046;14 --key: #2a2f34;15 --key-dark: #181c20;16 --key-label: #e4eaee;17 --accent: #b9f58a;18 }19 body {20 margin: 0;21 padding: 0;22 background: transparent;23 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;24 color: var(--text);25 }26 #render-target {27 position: relative;28 overflow: hidden;29 width: 1080px;30 height: 2400px;31 background: var(--bg);32 }33 34 /* Status bar */35 .status-bar {36 position: absolute;37 top: 0;38 left: 0;39 width: 1080px;40 height: 120px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 padding: 0 36px;45 box-sizing: border-box;46 color: var(--text);47 font-weight: 600;48 letter-spacing: 0.5px;49 }50 .status-left {51 font-size: 40px;52 opacity: 0.95;53 }54 .status-right {55 display: flex;56 align-items: center;57 gap: 24px;58 }59 .sb-icon {60 width: 40px;61 height: 40px;62 opacity: 0.9;63 }64 .battery {65 font-size: 32px;66 color: var(--text);67 opacity: 0.9;68 }69 70 /* Main content */71 .content {72 position: absolute;73 top: 150px;74 left: 0;75 width: 100%;76 padding: 0 40px;77 box-sizing: border-box;78 }79 80 .search-row {81 display: flex;82 align-items: center;83 justify-content: space-between;84 gap: 24px;85 }86 .search-card {87 flex: 1;88 height: 120px;89 background: var(--card);90 border-radius: 26px;91 box-shadow: 0 8px 16px rgba(0,0,0,0.35);92 display: flex;93 align-items: center;94 padding: 0 36px;95 box-sizing: border-box;96 }97 .search-icon {98 width: 56px;99 height: 56px;100 margin-right: 22px;101 }102 .search-placeholder {103 font-size: 40px;104 color: var(--text);105 opacity: 0.95;106 }107 .cancel-btn {108 width: 160px;109 text-align: right;110 font-size: 36px;111 color: var(--muted);112 }113 114 .location-row {115 margin-top: 30px;116 display: flex;117 align-items: center;118 gap: 22px;119 color: var(--muted);120 }121 .loc-icon {122 width: 42px;123 height: 42px;124 }125 .loc-text {126 font-size: 36px;127 }128 129 .results-area {130 margin-top: 26px;131 height: 980px;132 background: #1f262b;133 border-radius: 6px;134 border: 1px solid var(--line);135 }136 137 /* Keyboard */138 .keyboard {139 position: absolute;140 left: 0;141 bottom: 0;142 width: 100%;143 height: 980px;144 background: var(--key-dark);145 border-top: 1px solid #121519;146 box-shadow: 0 -8px 20px rgba(0,0,0,0.45);147 padding: 24px 24px 80px;148 box-sizing: border-box;149 }150 .kb-toolbar {151 height: 120px;152 display: flex;153 align-items: center;154 gap: 32px;155 color: var(--key-label);156 }157 .tool {158 display: flex;159 align-items: center;160 justify-content: center;161 width: 110px;162 height: 88px;163 background: var(--key);164 border-radius: 18px;165 border: 1px solid #1f2327;166 font-size: 32px;167 font-weight: 700;168 }169 .tool.wide {170 width: 140px;171 font-weight: 600;172 }173 .keys {174 margin-top: 18px;175 display: grid;176 grid-template-rows: repeat(4, 1fr);177 gap: 16px;178 }179 .row {180 display: flex;181 gap: 14px;182 justify-content: center;183 }184 .key {185 width: 92px;186 height: 140px;187 background: var(--key);188 border: 1px solid #1f2327;189 border-radius: 18px;190 color: var(--key-label);191 font-size: 40px;192 display: flex;193 align-items: center;194 justify-content: center;195 }196 .key.small {197 width: 120px;198 }199 .key.large {200 width: 420px;201 }202 .key.circle {203 width: 120px;204 height: 120px;205 border-radius: 60px;206 background: var(--accent);207 color: #1a1f23;208 font-weight: 700;209 border: none;210 }211 .key.dark {212 background: #3a4046;213 }214 .key.icon {215 font-size: 36px;216 }217 218 .nav-handle {219 position: absolute;220 bottom: 20px;221 left: 50%;222 transform: translateX(-50%);223 width: 240px;224 height: 10px;225 background: #ffffff;226 opacity: 0.9;227 border-radius: 6px;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status bar -->235 <div class="status-bar">236 <div class="status-left">8:18</div>237 <div class="status-right">238 <!-- simple outlined icons -->239 <svg class="sb-icon" viewBox="0 0 24 24">240 <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2" fill="none"></circle>241 </svg>242 <svg class="sb-icon" viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="3" fill="white"></circle>244 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l2 2M17 17l2 2M17 7l2-2M5 19l2-2" stroke="white" stroke-width="2" fill="none"></path>245 </svg>246 <svg class="sb-icon" viewBox="0 0 24 24">247 <path d="M4 18L20 12 4 6z" fill="white"></path>248 </svg>249 <svg class="sb-icon" viewBox="0 0 24 24">250 <path d="M6 10a6 6 0 0112 0h2a4 4 0 010 8H6a4 4 0 110-8h0z" fill="white" opacity="0.9"></path>251 </svg>252 <svg class="sb-icon" viewBox="0 0 24 24">253 <path d="M3 12l6 6V6z" fill="none" stroke="white" stroke-width="2"></path>254 </svg>255 <svg class="sb-icon" viewBox="0 0 24 24">256 <path d="M3 12c3-6 15-6 18 0" stroke="white" stroke-width="2" fill="none"></path>257 <circle cx="12" cy="12" r="2" fill="white"></circle>258 </svg>259 <svg class="sb-icon" viewBox="0 0 24 24">260 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="white" stroke-width="2" fill="none"></rect>261 <rect x="20" y="9" width="2" height="6" fill="white"></rect>262 </svg>263 <div class="battery">91%</div>264 </div>265 </div>266 267 <!-- Main content -->268 <div class="content">269 <div class="search-row">270 <div class="search-card">271 <svg class="search-icon" viewBox="0 0 24 24">272 <circle cx="11" cy="11" r="7" stroke="#e7eef2" stroke-width="2" fill="none"></circle>273 <path d="M20 20l-4.5-4.5" stroke="#e7eef2" stroke-width="2" fill="none" stroke-linecap="round"></path>274 </svg>275 <div class="search-placeholder">Find Location</div>276 </div>277 <div class="cancel-btn">Cancel</div>278 </div>279 280 <div class="location-row">281 <svg class="loc-icon" viewBox="0 0 24 24">282 <path d="M3 12l18-6-6 18-4-8z" fill="#cfd8dc"></path>283 </svg>284 <div class="loc-text">Use current location</div>285 </div>286 287 <div class="results-area"></div>288 </div>289 290 <!-- Keyboard -->291 <div class="keyboard">292 <div class="kb-toolbar">293 <div class="tool">▤</div>294 <div class="tool">😊</div>295 <div class="tool wide">GIF</div>296 <div class="tool">⚙️</div>297 <div class="tool">G</div>298 <div class="tool">🎨</div>299 <div class="tool">🎙️</div>300 </div>301 302 <div class="keys">303 <div class="row">304 <div class="key">q</div>305 <div class="key">w</div>306 <div class="key">e</div>307 <div class="key">r</div>308 <div class="key">t</div>309 <div class="key">y</div>310 <div class="key">u</div>311 <div class="key">i</div>312 <div class="key">o</div>313 <div class="key">p</div>314 </div>315 <div class="row">316 <div class="key">a</div>317 <div class="key">s</div>318 <div class="key">d</div>319 <div class="key">f</div>320 <div class="key">g</div>321 <div class="key">h</div>322 <div class="key">j</div>323 <div class="key">k</div>324 <div class="key">l</div>325 </div>326 <div class="row">327 <div class="key dark">⬆</div>328 <div class="key">z</div>329 <div class="key">x</div>330 <div class="key">c</div>331 <div class="key">v</div>332 <div class="key">b</div>333 <div class="key">n</div>334 <div class="key">m</div>335 <div class="key icon">⌫</div>336 </div>337 <div class="row">338 <div class="key circle">?123</div>339 <div class="key small">,</div>340 <div class="key small">😊</div>341 <div class="key large"></div>342 <div class="key small">.</div>343 <div class="key circle">344 <svg width="40" height="40" viewBox="0 0 24 24">345 <circle cx="11" cy="11" r="7" stroke="#1a1f23" stroke-width="2" fill="none"></circle>346 <path d="M20 20l-4.5-4.5" stroke="#1a1f23" stroke-width="2" fill="none" stroke-linecap="round"></path>347 </svg>348 </div>349 </div>350 </div>351 352 <div class="nav-handle"></div>353 </div>354 355</div>356</body>357</html>