GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search Locations UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 0;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 110px;21 display: flex; align-items: center;22 padding: 0 40px;23 font-size: 40px; color: #111;24 }25 .status-left { flex: 1; }26 .status-right {27 display: flex; gap: 28px; align-items: center;28 }29 .status-dot {30 width: 12px; height: 12px; background: #777; border-radius: 50%;31 }32 .icon-signal, .icon-wifi, .icon-battery {33 width: 48px; height: 48px;34 }35 36 /* Search bar */37 .search-wrap {38 position: absolute; top: 120px; left: 36px; right: 36px;39 }40 .search-bar {41 background: #EAF4FF;42 border: 2px solid #D6E7FF;43 border-radius: 24px;44 height: 150px;45 display: flex; align-items: center;46 padding: 0 26px;47 box-sizing: border-box;48 }49 .back-btn {50 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;51 margin-right: 18px;52 }53 .search-text {54 font-size: 56px; font-weight: 600; color: #222;55 flex: 1;56 }57 .clear-btn {58 width: 88px; height: 88px;59 border-radius: 44px;60 background: #EFEFEF;61 border: 2px solid #D0D0D0;62 display: flex; align-items: center; justify-content: center;63 }64 .clear-btn svg { width: 40px; height: 40px; stroke: #777; }65 66 /* List */67 .results {68 position: absolute; top: 300px; left: 0; right: 0;69 padding-left: 36px; padding-right: 36px;70 box-sizing: border-box;71 }72 .result-item {73 display: flex; align-items: center;74 height: 180px;75 border-bottom: 2px solid #EEE;76 }77 .pin {78 width: 70px; height: 70px; margin-right: 32px;79 }80 .result-text { display: flex; flex-direction: column; }81 .result-title { font-size: 56px; font-weight: 700; color: #111; line-height: 1.1; }82 .result-sub { font-size: 40px; color: #6F6F6F; margin-top: 8px; }83 84 /* Keyboard */85 .keyboard {86 position: absolute; left: 0; right: 0; bottom: 0;87 height: 900px; background: #1E1E1E; color: #EDE0D8;88 border-top: 2px solid #2A2A2A;89 }90 .kb-suggestions {91 height: 120px; background: #2A2A2A;92 display: flex; align-items: center; gap: 30px;93 padding: 0 36px; box-sizing: border-box;94 font-size: 46px; color: #EDE0D8;95 }96 .kb-suggestions .sep { color: #A89F96; }97 .kb-icon-square {98 width: 70px; height: 70px; background: #3A3A3A; border-radius: 16px;99 display: flex; align-items: center; justify-content: center;100 margin-right: 10px;101 }102 .kb-rows {103 padding: 30px 24px; box-sizing: border-box;104 }105 .kb-row {106 display: flex; justify-content: center; gap: 18px;107 margin-bottom: 28px;108 }109 .key {110 background: #2E2E2E; color: #EDE0D8; border-radius: 18px;111 height: 120px; min-width: 90px; padding: 0 20px;112 display: flex; align-items: center; justify-content: center;113 font-size: 54px; box-shadow: inset 0 0 0 1px #3A3A3A;114 }115 .key.small { min-width: 140px; font-size: 40px; }116 .key.wide { min-width: 170px; }117 .key.space { flex: 1; min-width: 420px; }118 .key.circle {119 width: 120px; height: 120px; border-radius: 60px; background: #FFE09A; color: #3A2B00;120 box-shadow: none; font-weight: 700;121 }122 .key.darkcircle {123 width: 120px; height: 120px; border-radius: 60px; background: #3A3A3A;124 box-shadow: inset 0 0 0 1px #4A4A4A;125 }126 .backspace svg { width: 52px; height: 52px; stroke: #EDE0D8; }127 128 /* Bottom navigation pill */129 .nav-pill {130 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);131 width: 240px; height: 18px; background: #E9E9E9; border-radius: 9px;132 }133</style>134</head>135<body>136<div id="render-target">137 <!-- Status bar -->138 <div class="status-bar">139 <div class="status-left">11:45</div>140 <div class="status-right">141 <span style="font-size:38px; color:#666;">68°</span>142 <svg class="icon-signal" viewBox="0 0 24 24">143 <path d="M3 17h2v4H3v-4zm4-6h2v10H7V11zm4-4h2v14h-2V7zm4-4h2v18h-2V3z" fill="#666"/>144 </svg>145 <svg class="icon-wifi" viewBox="0 0 24 24">146 <path d="M12 18c.7 0 1.3.6 1.3 1.3S12.7 20.6 12 20.6s-1.3-.6-1.3-1.3S11.3 18 12 18zm-6.6-6.1l1.4 1.4C8.1 11 10 10.3 12 10.3s3.9.7 5.2 2l1.4-1.4C16.9 8.7 14.5 7.8 12 7.8s-4.9.9-6.6 4.1zm-3-3l1.4 1.4C6 8 8.9 6.9 12 6.9s6 .9 8.2 2.4l1.4-1.4C18.7 5.2 15.5 4.3 12 4.3 8.5 4.3 5.3 5.2 2.4 8.9z" fill="#666"/>147 </svg>148 <svg class="icon-battery" viewBox="0 0 24 24">149 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>150 <rect x="4" y="8" width="12" height="8" fill="#666"/>151 <rect x="20" y="10" width="2" height="4" fill="#666"/>152 </svg>153 <div class="status-dot"></div>154 </div>155 </div>156 157 <!-- Search bar -->158 <div class="search-wrap">159 <div class="search-bar">160 <div class="back-btn">161 <svg viewBox="0 0 24 24">162 <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 <div class="search-text">Hawaii</div>166 <div class="clear-btn">167 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">168 <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-linecap="round"/>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Results list -->175 <div class="results">176 <div class="result-item">177 <svg class="pin" viewBox="0 0 24 24">178 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>179 </svg>180 <div class="result-text">181 <div class="result-title">Hawaii</div>182 <div class="result-sub">City in United States</div>183 </div>184 </div>185 <div class="result-item">186 <svg class="pin" viewBox="0 0 24 24">187 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>188 </svg>189 <div class="result-text">190 <div class="result-title">Honolulu</div>191 <div class="result-sub">City in Hawaii, United States</div>192 </div>193 </div>194 <div class="result-item">195 <svg class="pin" viewBox="0 0 24 24">196 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>197 </svg>198 <div class="result-text">199 <div class="result-title">Kauai</div>200 <div class="result-sub">City in Hawaii, United States</div>201 </div>202 </div>203 <div class="result-item">204 <svg class="pin" viewBox="0 0 24 24">205 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>206 </svg>207 <div class="result-text">208 <div class="result-title">Maui</div>209 <div class="result-sub">City in Hawaii, United States</div>210 </div>211 </div>212 <div class="result-item">213 <svg class="pin" viewBox="0 0 24 24">214 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>215 </svg>216 <div class="result-text">217 <div class="result-title">Wailea</div>218 <div class="result-sub">City in Hawaii, United States</div>219 </div>220 </div>221 <div class="result-item">222 <svg class="pin" viewBox="0 0 24 24">223 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>224 </svg>225 <div class="result-text">226 <div class="result-title">Lanai</div>227 <div class="result-sub">City in Hawaii, United States</div>228 </div>229 </div>230 <div class="result-item" style="border-bottom:none;">231 <svg class="pin" viewBox="0 0 24 24">232 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="#777" stroke-width="2"/>233 </svg>234 <div class="result-text">235 <div class="result-title">Molokai</div>236 <div class="result-sub">City in Hawaii, United States</div>237 </div>238 </div>239 </div>240 241 <!-- Keyboard -->242 <div class="keyboard">243 <div class="kb-suggestions">244 <div class="kb-icon-square">245 <svg viewBox="0 0 24 24">246 <rect x="4" y="4" width="16" height="12" rx="2" fill="#DDD"/>247 <rect x="7" y="7" width="10" height="2" fill="#333"/>248 </svg>249 </div>250 <div>Hawaii</div>251 <div class="sep">|</div>252 <div>Hawaiian</div>253 <div style="margin-left:auto; display:flex; align-items:center; gap:20px;">254 <div class="darkcircle key">255 <svg viewBox="0 0 24 24">256 <circle cx="12" cy="12" r="9" fill="#EEE"/>257 <rect x="10.5" y="6" width="3" height="8" fill="#333"/>258 <circle cx="12" cy="16.5" r="1.5" fill="#333"/>259 </svg>260 </div>261 </div>262 </div>263 <div class="kb-rows">264 <div class="kb-row">265 <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>266 <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>267 </div>268 <div class="kb-row">269 <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>270 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>271 </div>272 <div class="kb-row">273 <div class="key small">⇧</div>274 <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>275 <div class="key backspace">276 <svg viewBox="0 0 24 24" fill="none">277 <path d="M6 12l4-4h8v8H10l-4-4z" stroke="#EDE0D8" stroke-width="2"/>278 </svg>279 </div>280 </div>281 <div class="kb-row">282 <div class="key small">?123</div>283 <div class="key small">,</div>284 <div class="key space"></div>285 <div class="key small">.</div>286 <div class="key circle">✓</div>287 </div>288 </div>289 </div>290 291 <div class="nav-pill"></div>292</div>293</body>294</html>