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.0">6<title>Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 padding: 24px 36px 0 36px;19 box-sizing: border-box;20 color: #212121;21 display: flex; align-items: center; justify-content: space-between;22 font-weight: 500;23 }24 .status-bar .time { font-size: 40px; letter-spacing: 0.5px; }25 .status-icons { display: flex; gap: 24px; align-items: center; }26 .status-icons svg { width: 40px; height: 40px; }27 28 /* Search bar */29 .search-bar {30 margin: 8px 28px 0 28px;31 height: 110px;32 border: 1.5px solid #DADCE0;33 border-radius: 55px;34 display: flex; align-items: center;35 padding: 0 24px;36 box-sizing: border-box;37 background: #FFFFFF;38 }39 .icon-btn { background: transparent; border: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; }40 .icon-btn svg { width: 48px; height: 48px; }41 .search-input {42 flex: 1; display: flex; align-items: center;43 font-size: 40px; color: #333;44 margin: 0 20px;45 white-space: nowrap;46 }47 .search-input .caret {48 width: 3px; height: 48px; background: #1A73E8; margin-left: 8px; border-radius: 2px;49 }50 .clear-btn {51 width: 66px; height: 66px;52 background: #F0F0F0; border-radius: 33px;53 border: 1px solid #D0D0D0;54 }55 56 /* Results */57 .results { margin-top: 16px; }58 .result-item {59 display: flex; align-items: flex-start;60 padding: 26px 28px;61 gap: 30px;62 }63 .pin {64 width: 72px; height: 72px; border-radius: 36px;65 border: 1px solid #CFCFCF; display: flex; align-items: center; justify-content: center;66 background: #EFEFEF;67 }68 .result-text { flex: 1; }69 .result-title { font-size: 44px; font-weight: 700; color: #1F1F1F; }70 .result-sub { font-size: 32px; color: #6A6A6A; margin-top: 8px; }71 .go-icon { width: 48px; height: 48px; margin-top: 12px; }72 .divider { height: 1px; background: #E5E5E5; margin: 0 28px; }73 74 /* Keyboard */75 .keyboard {76 position: absolute; left: 0; right: 0; bottom: 70px;77 height: 880px; background: #1E1E1E; color: #EEE;78 border-top-left-radius: 24px; border-top-right-radius: 24px;79 box-shadow: 0 -4px 10px rgba(0,0,0,0.25);80 }81 .suggestions {82 height: 110px; display: flex; align-items: center; gap: 32px;83 padding: 0 28px; box-sizing: border-box; color: #DADADA; font-size: 38px;84 border-bottom: 1px solid #2A2A2A;85 }86 .suggest-icon {87 width: 72px; height: 72px; border-radius: 16px; background: #2A2A2A;88 display: flex; align-items: center; justify-content: center;89 }90 .suggest-img {91 width: 72px; height: 72px; background: #E0E0E0; border: 1px solid #BDBDBD;92 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 12px;93 }94 95 .rows { padding: 22px 18px 0 18px; box-sizing: border-box; }96 .row { display: flex; justify-content: center; gap: 16px; margin-bottom: 18px; }97 .key {98 width: 92px; height: 120px; background: #2B2B2B;99 border-radius: 18px; display: flex; align-items: center; justify-content: center;100 font-size: 44px; color: #F3F3F3;101 }102 .key.small { width: 160px; }103 .key.wide { flex: 1; min-width: 520px; }104 .key.icon svg { width: 44px; height: 44px; }105 .space { font-size: 32px; color: #C7C7C7; }106 .bottom-row { display: flex; align-items: center; gap: 16px; padding: 0 18px; }107 108 /* Gesture bar */109 .gesture {110 position: absolute; left: 50%; transform: translateX(-50%);111 bottom: 18px; width: 360px; height: 14px; border-radius: 12px; background: #DADADA;112 }113</style>114</head>115<body>116<div id="render-target">117 <!-- Status bar -->118 <div class="status-bar">119 <div class="time">11:08</div>120 <div class="status-icons">121 <!-- Signal -->122 <svg viewBox="0 0 24 24">123 <rect x="2" y="14" width="3" height="8" fill="#616161"></rect>124 <rect x="7" y="10" width="3" height="12" fill="#616161"></rect>125 <rect x="12" y="6" width="3" height="16" fill="#616161"></rect>126 <rect x="17" y="2" width="3" height="20" fill="#616161"></rect>127 </svg>128 <!-- Battery -->129 <svg viewBox="0 0 30 24">130 <rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="none" stroke="#616161" stroke-width="2"></rect>131 <rect x="4" y="6" width="18" height="12" fill="#616161"></rect>132 <rect x="26" y="9" width="2.5" height="6" fill="#616161"></rect>133 </svg>134 </div>135 </div>136 137 <!-- Search bar -->138 <div class="search-bar">139 <button class="icon-btn back-btn" aria-label="Back">140 <svg viewBox="0 0 24 24">141 <path d="M15 5 L7 12 L15 19" fill="none" stroke="#4A4A4A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>142 </svg>143 </button>144 <div class="search-input">145 <span>presquile district in Lyon city</span>146 <span class="caret"></span>147 </div>148 <button class="icon-btn clear-btn" aria-label="Clear">149 <svg viewBox="0 0 24 24">150 <circle cx="12" cy="12" r="10" fill="none" stroke="#8A8A8A" stroke-width="1.5"></circle>151 <path d="M8 8 L16 16 M16 8 L8 16" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"></path>152 </svg>153 </button>154 </div>155 156 <!-- Results list -->157 <div class="results">158 <div class="result-item">159 <div class="pin">160 <svg viewBox="0 0 24 24">161 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>162 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>163 </svg>164 </div>165 <div class="result-text">166 <div class="result-title">The District</div>167 <div class="result-sub">South Street, Providence, RI, USA</div>168 </div>169 <svg class="go-icon" viewBox="0 0 24 24">170 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>171 </svg>172 </div>173 <div class="divider"></div>174 175 <div class="result-item">176 <div class="pin">177 <svg viewBox="0 0 24 24">178 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>179 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>180 </svg>181 </div>182 <div class="result-text">183 <div class="result-title">District</div>184 <div class="result-sub">Green Street, Portsmouth, VA, USA</div>185 </div>186 <svg class="go-icon" viewBox="0 0 24 24">187 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>188 </svg>189 </div>190 <div class="divider"></div>191 192 <div class="result-item">193 <div class="pin">194 <svg viewBox="0 0 24 24">195 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>196 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>197 </svg>198 </div>199 <div class="result-text">200 <div class="result-title">The District SPR</div>201 <div class="result-sub">Walnut Street, Jacksonville, FL, USA</div>202 </div>203 <svg class="go-icon" viewBox="0 0 24 24">204 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>205 </svg>206 </div>207 <div class="divider"></div>208 209 <div class="result-item">210 <div class="pin">211 <svg viewBox="0 0 24 24">212 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>213 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>214 </svg>215 </div>216 <div class="result-text">217 <div class="result-title">The District Theatre</div>218 <div class="result-sub">Massachusetts Avenue, Indianapolis, IN, USA</div>219 </div>220 <svg class="go-icon" viewBox="0 0 24 24">221 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>222 </svg>223 </div>224 <div class="divider"></div>225 226 <div class="result-item">227 <div class="pin">228 <svg viewBox="0 0 24 24">229 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>230 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>231 </svg>232 </div>233 <div class="result-text">234 <div class="result-title">The District on Apache</div>235 <div class="result-sub">East Apache Boulevard, Tempe, AZ, USA</div>236 </div>237 <svg class="go-icon" viewBox="0 0 24 24">238 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>239 </svg>240 </div>241 <div class="divider"></div>242 243 <div class="result-item">244 <div class="pin">245 <svg viewBox="0 0 24 24">246 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>247 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>248 </svg>249 </div>250 <div class="result-text">251 <div class="result-title">The District on 5th</div>252 <div class="result-sub">North 5th Avenue, Tucson, AZ, USA</div>253 </div>254 <svg class="go-icon" viewBox="0 0 24 24">255 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>256 </svg>257 </div>258 <div class="divider"></div>259 260 <div class="result-item">261 <div class="pin">262 <svg viewBox="0 0 24 24">263 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5 6 12 6 12 s6-7 6-12 c0-3.3-2.7-6-6-6z" fill="#9E9E9E"></path>264 <circle cx="12" cy="8" r="3" fill="#DADADA"></circle>265 </svg>266 </div>267 <div class="result-text">268 <div class="result-title">The District at Tustin Legacy</div>269 <div class="result-sub">Park Avenue, Tustin, CA, USA</div>270 </div>271 <svg class="go-icon" viewBox="0 0 24 24">272 <path d="M6 18 L18 6 M10 6 H18 V14" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>273 </svg>274 </div>275 <div class="divider"></div>276 </div>277 278 <!-- Keyboard -->279 <div class="keyboard">280 <div class="suggestions">281 <div class="suggest-icon">282 <svg viewBox="0 0 24 24">283 <rect x="3" y="3" width="7" height="7" fill="#9E9E9E"></rect>284 <rect x="14" y="3" width="7" height="7" fill="#9E9E9E"></rect>285 <rect x="3" y="14" width="7" height="7" fill="#9E9E9E"></rect>286 <rect x="14" y="14" width="7" height="7" fill="#9E9E9E"></rect>287 </svg>288 </div>289 <div>city</div>290 <div>City</div>291 <div class="suggest-img">[IMG: City]</div>292 <div class="suggest-img">[IMG: City]</div>293 <div style="margin-left:auto;display:flex;align-items:center;gap:24px;">294 <svg viewBox="0 0 24 24" width="48" height="48">295 <path d="M10 3 C7.8 3 6 4.8 6 7 v6 c0 2.2 1.8 4 4 4 s4-1.8 4-4 V7 c0-2.2-1.8-4-4-4z" fill="#BDBDBD"></path>296 <rect x="11" y="17" width="2" height="4" fill="#BDBDBD"></rect>297 </svg>298 </div>299 </div>300 301 <div class="rows">302 <div class="row">303 <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>304 <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>305 </div>306 <div class="row" style="padding-left:60px;">307 <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>308 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>309 </div>310 <div class="row">311 <div class="key small icon" style="width:140px;">312 <svg viewBox="0 0 24 24"><path d="M12 4 L6 12 H10 V20 H14 V12 H18 L12 4Z" fill="#D0D0D0"></path></svg>313 </div>314 <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>315 <div class="key">n</div><div class="key">m</div>316 <div class="key small icon" style="width:180px;">317 <svg viewBox="0 0 24 24">318 <path d="M3 6 L9 6 L13 12 L9 18 L3 18 Z" fill="#D0D0D0"></path>319 <path d="M14 9 L19 14 M14 14 L19 9" stroke="#D0D0D0" stroke-width="2" stroke-linecap="round"></path>320 </svg>321 </div>322 </div>323 <div class="bottom-row" style="margin-top:10px;">324 <div class="key small" style="width:150px; background:#3A3A3A; color:#D0D0D0;">?123</div>325 <div class="key small icon" style="width:120px;">326 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#BDBDBD"></circle><path d="M9 9 C9 7.3 10.3 6 12 6 s3 1.3 3 3 c0 1.7-1.3 3-3 3 s-3-1.3-3-3Z" fill="#2B2B2B"></path></svg>327 </div>328 <div class="key wide space">space</div>329 <div class="key">.</div>330 <div class="key small icon" style="width:140px; background:#9EC3F8; color:#0B4DBB;">331 <svg viewBox="0 0 24 24">332 <circle cx="10" cy="10" r="6.5" fill="none" stroke="#0B4DBB" stroke-width="2"></circle>333 <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#0B4DBB" stroke-width="2" stroke-linecap="round"></line>334 </svg>335 </div>336 </div>337 </div>338 </div>339 340 <!-- Gesture bar -->341 <div class="gesture"></div>342</div>343</body>344</html>