GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Results with Keyboard</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: #ffffff;10 }11 12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 98px;15 background: #ffffff;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 32px; box-sizing: border-box;18 }19 .status-left { font-size: 36px; color: #212121; font-weight: 600; }20 .status-right { display: flex; gap: 24px; align-items: center; }21 .sb-icon { width: 28px; height: 28px; border-radius: 6px; background: #BDBDBD; }22 23 /* Search bar */24 .search-wrap {25 position: absolute; top: 110px; left: 24px; right: 24px;26 }27 .search-bar {28 height: 120px; border-radius: 60px; background: #ffffff;29 box-shadow: 0 2px 0 rgba(0,0,0,0.08);30 border: 1px solid #E0E0E0;31 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;32 gap: 24px;33 }34 .search-text {35 font-size: 48px; color: #111; flex: 1; letter-spacing: 0.2px;36 }37 .circle-btn {38 width: 72px; height: 72px; border-radius: 36px;39 background: #F3F3F3; display: flex; align-items: center; justify-content: center;40 border: 1px solid #E0E0E0;41 }42 .icon { width: 40px; height: 40px; }43 44 /* Results list */45 .results {46 position: absolute; top: 260px; left: 0; width: 100%; bottom: 980px;47 overflow: hidden;48 }49 .result-item {50 display: flex; align-items: center; padding: 32px 24px;51 border-top: 1px solid #EEEEEE;52 }53 .result-item:first-child { border-top: none; }54 .pin {55 width: 72px; height: 72px; border-radius: 36px; background: #EFEFEF;56 border: 1px solid #D6D6D6; display: flex; align-items: center; justify-content: center;57 margin-right: 28px;58 }59 .result-text { flex: 1; }60 .title {61 font-size: 44px; color: #212121; font-weight: 700; margin-bottom: 8px;62 }63 .subtitle {64 font-size: 34px; color: #757575;65 }66 .open-arrow {67 width: 56px; height: 56px; border-radius: 28px; background: #F5F5F5; 68 border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center;69 margin-left: 18px;70 }71 72 /* Keyboard suggestions */73 .kb-suggestions {74 position: absolute; bottom: 980px; left: 0; width: 100%;75 background: #1E1C1F; padding: 20px 24px; box-sizing: border-box;76 display: flex; gap: 18px;77 }78 .chip {79 background: #2A272B; color: #F0E6EF; font-size: 36px; padding: 18px 28px;80 border-radius: 30px; border: 1px solid #3A373B;81 }82 83 /* Keyboard */84 .keyboard {85 position: absolute; bottom: 0; left: 0; width: 100%; height: 980px;86 background: #1E1C1F; box-shadow: 0 -4px 10px rgba(0,0,0,0.2);87 }88 .keys {89 padding: 20px 24px; box-sizing: border-box;90 }91 .row { display: flex; justify-content: space-between; margin-top: 18px; }92 .key {93 width: 92px; height: 120px; border-radius: 18px;94 background: #2A272B; color: #EDE0E9; font-size: 48px; display: flex;95 align-items: center; justify-content: center; border: 1px solid #3A373B;96 }97 .key.small { width: 80px; }98 .key.wide { width: 160px; }99 .key.xwide { width: 220px; }100 .key.space { flex: 1; margin: 0 14px; }101 .bottom-bar {102 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);103 width: 420px; height: 10px; background: #E0E0E0; border-radius: 8px; opacity: 0.8;104 }105 .mic-btn, .search-btn {106 width: 120px; height: 120px; border-radius: 24px; background: #E7CAD4;107 display: flex; align-items: center; justify-content: center; color: #111;108 }109 .search-btn { background: #F4D7E0; }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status Bar -->116 <div class="status-bar">117 <div class="status-left">10:56</div>118 <div class="status-right">119 <div class="sb-icon"></div>120 <div class="sb-icon"></div>121 <div class="sb-icon"></div>122 <div class="sb-icon"></div>123 </div>124 </div>125 126 <!-- Search Bar -->127 <div class="search-wrap">128 <div class="search-bar">129 <div class="circle-btn" aria-label="Back">130 <svg class="icon" viewBox="0 0 24 24">131 <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>132 </svg>133 </div>134 <div class="search-text">Pete's Kitchen</div>135 <div class="circle-btn" aria-label="Clear">136 <svg class="icon" viewBox="0 0 24 24">137 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>138 </svg>139 </div>140 </div>141 </div>142 143 <!-- Results List -->144 <div class="results">145 <div class="result-item">146 <div class="pin">147 <svg viewBox="0 0 24 24" width="34" height="34">148 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>149 </svg>150 </div>151 <div class="result-text">152 <div class="title">Pete's Kitchen</div>153 <div class="subtitle">East Colfax Avenue, Denver, CO, USA</div>154 </div>155 <div class="open-arrow">156 <svg viewBox="0 0 24 24" width="30" height="30">157 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>158 </svg>159 </div>160 </div>161 162 <div class="result-item">163 <div class="pin">164 <svg viewBox="0 0 24 24" width="34" height="34">165 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>166 </svg>167 </div>168 <div class="result-text">169 <div class="title">Pete's University Park Cafe</div>170 <div class="subtitle">East Evans Avenue, Denver, CO, USA</div>171 </div>172 <div class="open-arrow">173 <svg viewBox="0 0 24 24" width="30" height="30">174 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 </div>178 179 <div class="result-item">180 <div class="pin">181 <svg viewBox="0 0 24 24" width="34" height="34">182 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>183 </svg>184 </div>185 <div class="result-text">186 <div class="title">Pete's Kitchen</div>187 <div class="subtitle">6th Street Southwest, Mason City, IA, USA</div>188 </div>189 <div class="open-arrow">190 <svg viewBox="0 0 24 24" width="30" height="30">191 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192 </svg>193 </div>194 </div>195 196 <div class="result-item">197 <div class="pin">198 <svg viewBox="0 0 24 24" width="34" height="34">199 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>200 </svg>201 </div>202 <div class="result-text">203 <div class="title" style="letter-spacing:1px;">PETE'S KITCHEN</div>204 <div class="subtitle">West King Street, Cocoa, FL, USA</div>205 </div>206 <div class="open-arrow">207 <svg viewBox="0 0 24 24" width="30" height="30">208 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209 </svg>210 </div>211 </div>212 213 <div class="result-item">214 <div class="pin">215 <svg viewBox="0 0 24 24" width="34" height="34">216 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>217 </svg>218 </div>219 <div class="result-text">220 <div class="title">Pete's Kitchen Coonara Avenue</div>221 <div class="subtitle">Coonara Avenue, West Pennant Hills NSW...</div>222 </div>223 <div class="open-arrow">224 <svg viewBox="0 0 24 24" width="30" height="30">225 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226 </svg>227 </div>228 </div>229 230 <div class="result-item">231 <div class="pin">232 <svg viewBox="0 0 24 24" width="34" height="34">233 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>234 </svg>235 </div>236 <div class="result-text">237 <div class="title">Pete's Kitchen Mini Food Center</div>238 <div class="subtitle">Cebu City, Cebu, Philippines</div>239 </div>240 <div class="open-arrow">241 <svg viewBox="0 0 24 24" width="30" height="30">242 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 </div>246 247 <div class="result-item">248 <div class="pin">249 <svg viewBox="0 0 24 24" width="34" height="34">250 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9E9E9E"/>251 </svg>252 </div>253 <div class="result-text">254 <div class="title">Pete's Kitchenwares</div>255 <div class="subtitle">Lorong Inanam Kapital 3, Inanam Kapital,...</div>256 </div>257 <div class="open-arrow">258 <svg viewBox="0 0 24 24" width="30" height="30">259 <path d="M7 17 L17 7 M10 7 H17 V14" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 </div>263 </div>264 265 <!-- Keyboard Suggested words -->266 <div class="kb-suggestions">267 <div class="chip">Kitchen</div>268 <div class="chip">Kitchens</div>269 <div class="chip">Kitchener</div>270 </div>271 272 <!-- Keyboard -->273 <div class="keyboard">274 <div class="keys">275 <!-- Numbers row -->276 <div class="row">277 <div class="key small">1</div>278 <div class="key small">2</div>279 <div class="key small">3</div>280 <div class="key small">4</div>281 <div class="key small">5</div>282 <div class="key small">6</div>283 <div class="key small">7</div>284 <div class="key small">8</div>285 <div class="key small">9</div>286 <div class="key small">0</div>287 </div>288 289 <!-- Letters row 1 -->290 <div class="row">291 <div class="key">q</div>292 <div class="key">w</div>293 <div class="key">e</div>294 <div class="key">r</div>295 <div class="key">t</div>296 <div class="key">y</div>297 <div class="key">u</div>298 <div class="key">i</div>299 <div class="key">o</div>300 <div class="key">p</div>301 </div>302 303 <!-- Letters row 2 -->304 <div class="row">305 <div class="key">a</div>306 <div class="key">s</div>307 <div class="key">d</div>308 <div class="key">f</div>309 <div class="key">g</div>310 <div class="key">h</div>311 <div class="key">j</div>312 <div class="key">k</div>313 <div class="key">l</div>314 </div>315 316 <!-- Letters row 3 -->317 <div class="row">318 <div class="key wide">⇧</div>319 <div class="key">z</div>320 <div class="key">x</div>321 <div class="key">c</div>322 <div class="key">v</div>323 <div class="key">b</div>324 <div class="key">n</div>325 <div class="key">m</div>326 <div class="key xwide" aria-label="Backspace">327 <svg viewBox="0 0 24 24" width="38" height="38">328 <path d="M3 12 L8 6 H20 V18 H8z M10 9 L15 14 M15 9 L10 14" stroke="#EDE0E9" stroke-width="2" fill="none" stroke-linecap="round"/>329 </svg>330 </div>331 </div>332 333 <!-- Bottom row -->334 <div class="row">335 <div class="key wide">?123</div>336 <div class="key wide">,</div>337 <div class="key space"></div>338 <div class="key wide">.</div>339 <div class="mic-btn" title="Voice">340 <svg viewBox="0 0 24 24" width="40" height="40">341 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm0 13c3.3 0 6-2.7 6-6M6 10c0 3.3 2.7 6 6 6m0 0v4" stroke="#1E1C1F" stroke-width="2" fill="none" stroke-linecap="round"/>342 </svg>343 </div>344 <div class="search-btn" title="Search">345 <svg viewBox="0 0 24 24" width="40" height="40">346 <circle cx="10" cy="10" r="7" stroke="#1E1C1F" stroke-width="2" fill="none"/>347 <path d="M15 15 L21 21" stroke="#1E1C1F" stroke-width="2" stroke-linecap="round"/>348 </svg>349 </div>350 </div>351 </div>352 <div class="bottom-bar"></div>353 </div>354 355</div>356</body>357</html>