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: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 height: 100px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 36px;26 color: #1f1f1f;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 26px;32 }33 .dot { width: 10px; height: 10px; background:#6d6d6d; border-radius:50%; display:inline-block; }34 35 /* Search app bar */36 .appbar {37 height: 140px;38 border-bottom: 1px solid #e5e5e5;39 display: flex;40 align-items: center;41 padding: 0 24px;42 gap: 24px;43 background: #FFFFFF;44 }45 .icon-btn {46 width: 70px;47 height: 70px;48 display: flex;49 align-items: center;50 justify-content: center;51 border-radius: 50%;52 }53 54 .search-field {55 flex: 1;56 display: flex;57 align-items: center;58 gap: 18px;59 background: #FFFFFF;60 border-radius: 12px;61 padding: 18px 6px;62 font-size: 44px;63 color: #2b2b2b;64 }65 .search-text {66 display: inline-flex;67 align-items: center;68 min-height: 1em;69 line-height: 1.2;70 }71 .caret {72 width: 3px;73 height: 54px;74 background: #e53935;75 margin-left: 8px;76 border-radius: 2px;77 }78 79 /* Suggestions */80 .suggestions {81 background: #FFFFFF;82 }83 .suggestion-item {84 height: 110px;85 display: flex;86 align-items: center;87 padding: 0 28px;88 gap: 26px;89 border-bottom: 1px solid #efefef;90 font-size: 40px;91 color: #555;92 }93 .suggestion-item .text { color: #616161; }94 .suggestion-spacer {95 height: 40px;96 background: #F3F4F6;97 border-top: 1px solid #eee;98 border-bottom: 1px solid #eee;99 }100 101 /* Content empty area */102 .empty-area {103 background: #F3F4F6;104 height: 1050px; /* fills until keyboard */105 }106 107 /* Keyboard */108 .keyboard {109 position: absolute;110 left: 0; right: 0; bottom: 0;111 height: 900px;112 background: #1f1f1f;113 color: #eaeaea;114 display: flex;115 flex-direction: column;116 border-top-left-radius: 18px;117 border-top-right-radius: 18px;118 overflow: hidden;119 }120 .kb-suggest {121 height: 110px;122 display: flex;123 align-items: center;124 justify-content: space-between;125 padding: 0 24px;126 background: #242424;127 border-bottom: 1px solid #2d2d2d;128 font-size: 38px;129 }130 .kb-suggest .chips {131 display: flex;132 align-items: center;133 gap: 26px;134 color: #f0f0f0;135 }136 .kb-rows { flex: 1; padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 18px; }137 .kb-row { display: flex; gap: 14px; justify-content: center; }138 .key {139 background: #2c2c2c;140 border: 1px solid #3a3a3a;141 border-radius: 16px;142 width: 92px;143 height: 130px;144 display: flex;145 align-items: center;146 justify-content: center;147 font-size: 42px;148 color: #f5f5f5;149 }150 .key.wide { width: 130px; }151 .key.extra-wide { width: 220px; }152 .space { flex: 1; min-width: 380px; }153 .key.blue {154 background: #cfe3ff;155 color: #0d47a1;156 border-color: #b3d2ff;157 border-radius: 65px;158 width: 130px;159 height: 130px;160 }161 .gesture-pill {162 position: absolute;163 bottom: 16px;164 left: 50%;165 transform: translateX(-50%);166 width: 220px;167 height: 10px;168 background: #dcdcdc33;169 border-radius: 6px;170 }171 172 .kb-footer-shadow { box-shadow: 0 -6px 18px rgba(0,0,0,0.25) inset; }173 174 /* Utility icon SVG sizing */175 svg { display: block; }176</style>177</head>178<body>179<div id="render-target">180 <!-- Status bar -->181 <div class="status-bar">182 <div style="font-weight:600;">9:45</div>183 <div class="status-right">184 <!-- Small status dots similar to screenshot -->185 <div class="dot"></div>186 <div class="dot" style="opacity:.8;"></div>187 <div class="dot" style="opacity:.6;"></div>188 <div style="width: 40px; height: 40px;">189 <!-- Location-ish icon -->190 <svg width="40" height="40" viewBox="0 0 24 24">191 <circle cx="12" cy="8" r="4" fill="#555"/>192 <path d="M12 12c-4 0-7 2-7 5v2h14v-2c0-3-3-5-7-5z" fill="#555"/>193 </svg>194 </div>195 <div style="width: 40px; height: 40px;">196 <!-- Signal icon -->197 <svg width="40" height="40" viewBox="0 0 24 24">198 <rect x="3" y="14" width="3" height="6" fill="#555"/>199 <rect x="8" y="12" width="3" height="8" fill="#555"/>200 <rect x="13" y="10" width="3" height="10" fill="#777"/>201 <rect x="18" y="8" width="3" height="12" fill="#9e9e9e"/>202 </svg>203 </div>204 <div style="width: 40px; height: 40px;">205 <!-- Battery -->206 <svg width="40" height="40" viewBox="0 0 24 24">207 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#555" />208 <rect x="4" y="9" width="14" height="6" fill="#c8c8c8"/>209 <rect x="20" y="10" width="2" height="4" fill="#555"/>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- App bar with search -->216 <div class="appbar">217 <div class="icon-btn">218 <svg width="44" height="44" viewBox="0 0 24 24">219 <path d="M15 18l-6-6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 223 <div class="search-field">224 <div class="search-text">225 Hiking Shoes For Women226 <span class="caret"></span>227 </div>228 </div>229 230 <div class="icon-btn">231 <!-- Clear (X) -->232 <svg width="44" height="44" viewBox="0 0 24 24">233 <path d="M6 6l12 12M18 6L6 18" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>234 </svg>235 </div>236 237 <div class="icon-btn">238 <!-- Mic -->239 <svg width="44" height="44" viewBox="0 0 24 24">240 <rect x="9" y="4" width="6" height="10" rx="3" fill="#5f6368"/>241 <path d="M5 11a7 7 0 0014 0" fill="none" stroke="#5f6368" stroke-width="2"/>242 <path d="M12 18v3" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>243 </svg>244 </div>245 </div>246 247 <!-- Suggestion -->248 <div class="suggestions">249 <div class="suggestion-item">250 <div style="width:54px; height:54px; display:flex; align-items:center; justify-content:center;">251 <!-- Clock/history -->252 <svg width="54" height="54" viewBox="0 0 24 24">253 <circle cx="12" cy="12" r="9" fill="none" stroke="#9e9e9e" stroke-width="2"/>254 <path d="M12 7v6l4 2" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>255 </svg>256 </div>257 <div class="text">hiking shoes for women</div>258 <div style="margin-left:auto; width:44px; height:44px;">259 <!-- Right chevron -->260 <svg width="44" height="44" viewBox="0 0 24 24">261 <path d="M9 6l6 6-6 6" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Spacer and empty area -->268 <div class="suggestion-spacer"></div>269 <div class="empty-area"></div>270 271 <!-- Keyboard -->272 <div class="keyboard kb-footer-shadow">273 <div class="kb-suggest">274 <div class="chips">275 <span>Women</span>276 <span style="opacity:.5;">|</span>277 <span>Womens</span>278 <span style="opacity:.5;">|</span>279 <span>Women's</span>280 </div>281 <div style="width:56px; height:56px;">282 <!-- Mic on suggestion bar -->283 <svg width="56" height="56" viewBox="0 0 24 24">284 <rect x="9" y="4" width="6" height="10" rx="3" fill="#bdbdbd"/>285 <path d="M5 11a7 7 0 0014 0" fill="none" stroke="#bdbdbd" stroke-width="2"/>286 <path d="M12 18v3" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>287 </svg>288 </div>289 </div>290 291 <div class="kb-rows">292 <div class="kb-row">293 <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>294 <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>295 </div>296 <div class="kb-row">297 <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>298 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>299 </div>300 <div class="kb-row">301 <div class="key wide">302 <!-- Shift -->303 <svg width="42" height="42" viewBox="0 0 24 24">304 <path d="M12 5l7 7h-4v6H9v-6H5l7-7z" fill="#eaeaea"/>305 </svg>306 </div>307 <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>308 <div class="key wide">309 <!-- Backspace -->310 <svg width="42" height="42" viewBox="0 0 24 24">311 <path d="M3 12l5-6h11a2 2 0 012 2v8a2 2 0 01-2 2H8l-5-6z" fill="#2c2c2c" stroke="#eaeaea" stroke-width="1.6"/>312 <path d="M11 9l4 4M15 9l-4 4" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>313 </svg>314 </div>315 </div>316 <div class="kb-row">317 <div class="key extra-wide">?123</div>318 <div class="key wide">319 <!-- Emoji -->320 <svg width="40" height="40" viewBox="0 0 24 24">321 <circle cx="12" cy="12" r="8" fill="#eaeaea"/>322 <circle cx="9" cy="10" r="1" fill="#2c2c2c"/>323 <circle cx="15" cy="10" r="1" fill="#2c2c2c"/>324 <path d="M8 14c1 1 2.5 1.5 4 1.5S15 15 16 14" stroke="#2c2c2c" stroke-width="1.6" fill="none" stroke-linecap="round"/>325 </svg>326 </div>327 <div class="key">,</div>328 <div class="key space" style="min-width:420px;"> </div>329 <div class="key">.</div>330 <div class="key blue">331 <!-- Search -->332 <svg width="44" height="44" viewBox="0 0 24 24">333 <circle cx="11" cy="11" r="6" stroke="#0d47a1" stroke-width="2" fill="none"/>334 <path d="M16 16l4 4" stroke="#0d47a1" stroke-width="2" stroke-linecap="round"/>335 </svg>336 </div>337 </div>338 </div>339 340 <div class="gesture-pill"></div>341 </div>342</div>343</body>344</html>