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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2160px;12 position: relative;13 overflow: hidden;14 background: #F5F6FA;15 color: #1e1e1e;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #E8EDF7;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-weight: 600;27 }28 .status-bar .time { font-size: 36px; color: #2b2b2b; }29 .status-icons {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .status-icon { width: 40px; height: 40px; }36 .status-battery { width: 60px; height: 40px; }37 38 /* Top app bar */39 .top-app-bar {40 height: 120px;41 background: #EDF1FA;42 display: flex;43 align-items: center;44 gap: 24px;45 padding: 0 24px;46 box-sizing: border-box;47 border-bottom: 1px solid #E0E0E0;48 }49 .back-btn {50 width: 72px; height: 72px; border-radius: 36px;51 display: flex; align-items: center; justify-content: center;52 }53 .back-btn svg { width: 42px; height: 42px; fill: none; stroke: #424242; stroke-width: 5; }54 .top-title { font-size: 44px; font-weight: 600; color: #333; }55 56 /* Filter chips row */57 .chips-row {58 height: 130px;59 display: flex;60 align-items: center;61 padding: 0 24px;62 gap: 24px;63 box-sizing: border-box;64 background: #FFFFFF;65 border-bottom: 1px solid #EEEEEE;66 }67 .chip {68 display: flex;69 align-items: center;70 gap: 16px;71 padding: 18px 28px;72 border: 2px solid #CFCFCF;73 border-radius: 24px;74 background: #FFFFFF;75 color: #333;76 font-size: 36px;77 white-space: nowrap;78 }79 .chip .icon-circle {80 width: 56px; height: 56px; border-radius: 28px;81 display: flex; align-items: center; justify-content: center;82 border: 2px solid rgba(0,0,0,0.1);83 }84 .chip svg { width: 36px; height: 36px; }85 86 /* Content area */87 .content {88 position: absolute;89 top: 370px; /* status(120)+appbar(120)+chips(130) */90 left: 0;91 right: 0;92 bottom: 880px; /* keyboard height */93 background: #FCFCFF;94 }95 96 /* Keyboard mock */97 .keyboard {98 position: absolute;99 left: 0; right: 0; bottom: 0;100 height: 880px;101 background: #F1F1F4;102 border-top: 1px solid #E0E0E0;103 box-sizing: border-box;104 }105 106 .kb-toolbar {107 height: 120px;108 display: flex;109 align-items: center;110 gap: 36px;111 padding: 0 24px;112 }113 .tool-btn {114 width: 84px; height: 84px; border-radius: 42px;115 background: #E5E7F1;116 display: flex; align-items: center; justify-content: center;117 }118 .tool-btn svg { width: 44px; height: 44px; fill: none; stroke: #444; stroke-width: 5; }119 .tool-icon {120 width: 64px; height: 64px;121 display: flex; align-items: center; justify-content: center;122 color: #444;123 border-radius: 14px;124 }125 .kb-divider { width: 2px; height: 56px; background: #D0D0D0; margin: 0 8px; }126 127 .kb-rows {128 display: flex;129 flex-direction: column;130 gap: 22px;131 padding: 12px 36px 0;132 box-sizing: border-box;133 }134 .kb-row {135 display: flex;136 justify-content: center;137 gap: 22px;138 }139 .key {140 width: 88px; height: 120px;141 display: flex; align-items: center; justify-content: center;142 font-size: 48px; color: #222;143 border-radius: 16px;144 }145 146 .kb-row.mid .key { width: 98px; }147 .kb-row.bottom { align-items: center; }148 149 .key-home, .key-backspace {150 width: 120px;151 }152 .key-home svg, .key-backspace svg { width: 50px; height: 50px; fill: none; stroke: #222; stroke-width: 5; }153 154 .kb-bottom {155 margin-top: 24px;156 padding: 0 24px;157 display: flex;158 align-items: center;159 gap: 18px;160 }161 .pill {162 height: 120px; border-radius: 22px;163 background: #D6DBEA;164 color: #222;165 display: flex; align-items: center; justify-content: center;166 font-size: 38px;167 padding: 0 28px;168 }169 .pill.gray { background: #E6E7EE; }170 .spacebar { flex: 1; height: 120px; border-radius: 30px; background: #CBD3E6; }171 .search-pill {172 width: 140px; height: 120px; border-radius: 26px; background: #C8D0E6;173 display: flex; align-items: center; justify-content: center;174 }175 .search-pill svg { width: 56px; height: 56px; stroke: #333; stroke-width: 5; fill: none; }176 177 /* Small text color tweaks */178 .muted { color: #666; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status bar -->185 <div class="status-bar">186 <div class="time">10:12</div>187 <div class="status-icons">188 <!-- Simple notification bell -->189 <svg class="status-icon" viewBox="0 0 24 24">190 <path d="M12 22c1.3 0 2-1 2-2h-4c0 1 0.7 2 2 2z" fill="#555"/>191 <path d="M18 16V11c0-3.3-2.2-6-6-6s-6 2.7-6 6v5l-2 2h16l-2-2z" fill="#555"/>192 </svg>193 <!-- Wi-Fi -->194 <svg class="status-icon" viewBox="0 0 24 24">195 <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>196 <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#555" stroke-width="2" fill="none"/>197 <path d="M8 16c2-2 6-2 8 0" stroke="#555" stroke-width="2" fill="none"/>198 <circle cx="12" cy="19" r="2" fill="#555"/>199 </svg>200 <!-- Battery -->201 <svg class="status-battery" viewBox="0 0 32 24">202 <rect x="1" y="4" width="26" height="16" rx="3" ry="3" stroke="#555" stroke-width="2" fill="none"/>203 <rect x="28" y="8" width="3" height="8" rx="1" fill="#555"/>204 <rect x="4" y="7" width="18" height="10" fill="#555"/>205 </svg>206 </div>207 </div>208 209 <!-- Top app bar -->210 <div class="top-app-bar">211 <div class="back-btn">212 <svg viewBox="0 0 24 24">213 <path d="M15 5L6 12l9 7" />214 </svg>215 </div>216 <div class="top-title">Search</div>217 </div>218 219 <!-- Filter chips -->220 <div class="chips-row">221 <div class="chip">222 <div class="icon-circle" style="background:#F4EAFE;">223 <svg viewBox="0 0 24 24">224 <path d="M6 7v10a3 3 0 0 0 6 0V7" stroke="#7B61FF" stroke-width="2" fill="none"/>225 <circle cx="18" cy="12" r="3" stroke="#7B61FF" stroke-width="2" fill="none"/>226 </svg>227 </div>228 <span>Audio</span>229 </div>230 <div class="chip">231 <div class="icon-circle" style="background:#EAF4FF;">232 <svg viewBox="0 0 24 24">233 <path d="M6 4h8l4 4v12H6z" stroke="#3F8CFF" stroke-width="2" fill="none"/>234 <path d="M14 4v4h4" stroke="#3F8CFF" stroke-width="2" fill="none"/>235 </svg>236 </div>237 <span>Documents & other</span>238 </div>239 <div class="chip">240 <div class="icon-circle" style="background:#FFECEC;">241 <svg viewBox="0 0 24 24">242 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#FF5A4D" stroke-width="2" fill="none"/>243 <circle cx="8" cy="10" r="2" fill="#FF5A4D"/>244 <path d="M21 19l-6-6-4 4-3-3-5 5" stroke="#FF5A4D" stroke-width="2" fill="none"/>245 </svg>246 </div>247 <span>Images</span>248 </div>249 </div>250 251 <!-- Content area (blank state) -->252 <div class="content"></div>253 254 <!-- Keyboard mock -->255 <div class="keyboard">256 <div class="kb-toolbar">257 <div class="tool-btn">258 <svg viewBox="0 0 24 24"><path d="M15 5L6 12l9 7"/></svg>259 </div>260 <div class="tool-icon">261 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#444" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="4" fill="#444"/></svg>262 </div>263 <div class="tool-icon" style="font-weight:700;">GIF</div>264 <div class="tool-icon">265 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#444" stroke-width="2" fill="none"/><path d="M12 8v8M8 12h8" stroke="#444" stroke-width="2"/></svg>266 </div>267 <div class="tool-icon">268 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#444" stroke-width="2"/><path d="M12 3v18" stroke="#444" stroke-width="2"/></svg>269 </div>270 <div class="kb-divider"></div>271 <div class="tool-icon">272 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#444" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#444" stroke-width="2"/></svg>273 </div>274 <div class="tool-icon">275 <svg viewBox="0 0 24 24"><path d="M5 12a7 7 0 1 1 14 0v4l-3 2v-6" stroke="#444" stroke-width="2" fill="none"/></svg>276 </div>277 </div>278 279 <div class="kb-rows">280 <!-- Row 1 -->281 <div class="kb-row">282 <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>283 <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>284 </div>285 <!-- Row 2 -->286 <div class="kb-row mid">287 <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>288 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>289 </div>290 <!-- Row 3 -->291 <div class="kb-row bottom">292 <div class="key key-home">293 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H6V10z" /></svg>294 </div>295 <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>296 <div class="key">n</div><div class="key">m</div>297 <div class="key key-backspace">298 <svg viewBox="0 0 24 24"><path d="M7 19l-5-7 5-7h14v14H7z"/><path d="M13 9l4 4m0-4l-4 4" /></svg>299 </div>300 </div>301 </div>302 303 <!-- Bottom controls -->304 <div class="kb-bottom">305 <div class="pill gray">?123</div>306 <div class="pill gray">,</div>307 <div class="pill gray">🙂</div>308 <div class="spacebar"></div>309 <div class="pill gray">.</div>310 <div class="search-pill">311 <svg viewBox="0 0 24 24">312 <circle cx="11" cy="11" r="7"/>313 <path d="M20 20l-5-5"/>314 </svg>315 </div>316 </div>317 </div>318 319</div>320</body>321</html>