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 with Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2b2b2b;25 font-weight: 600;26 font-size: 38px;27 }28 .status-left { display: flex; align-items: center; gap: 18px; }29 .notif-dots { letter-spacing: 10px; color: #747474; font-weight: 700; }30 .status-right { display: flex; align-items: center; gap: 22px; }31 .icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }32 33 /* Search bar */34 .search-wrap { padding: 12px 24px; }35 .search-bar {36 height: 120px;37 border-radius: 60px;38 background: #F1F3F4;39 display: flex;40 align-items: center;41 padding: 0 34px;42 gap: 26px;43 color: #202124;44 }45 .search-input-text {46 font-size: 44px;47 font-weight: 600;48 flex: 1;49 white-space: nowrap;50 overflow: hidden;51 text-overflow: ellipsis;52 }53 54 /* Result item */55 .results { padding: 14px 24px; }56 .result-item {57 height: 150px;58 display: flex;59 align-items: center;60 gap: 26px;61 padding: 0 20px;62 }63 .clock {64 width: 84px;65 height: 84px;66 border-radius: 50%;67 border: 2px solid #C7C7C7;68 display: flex;69 align-items: center;70 justify-content: center;71 color: #8E8E8E;72 }73 .result-text { flex: 1; }74 .result-title { font-size: 44px; font-weight: 700; color: #1f1f1f; }75 .result-sub { font-size: 34px; color: #7a7a7a; margin-top: 6px; }76 77 /* Keyboard */78 .keyboard {79 position: absolute;80 left: 0; right: 0; bottom: 0;81 height: 880px;82 background: #151515;83 color: #fff;84 box-shadow: 0 -2px 10px rgba(0,0,0,0.25);85 display: flex;86 flex-direction: column;87 }88 .kb-suggest {89 height: 140px;90 border-bottom: 1px solid #2a2a2a;91 display: flex;92 align-items: center;93 padding: 0 26px;94 gap: 22px;95 background: #1E1E1E;96 }97 .kb-suggest .chip {98 margin-left: auto;99 margin-right: auto;100 font-size: 40px;101 color: #d1d1d1;102 }103 .kb-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 18px; }104 .kb-row {105 display: flex;106 gap: 14px;107 justify-content: center;108 }109 .key {110 background: #333539;111 border-radius: 22px;112 height: 128px;113 min-width: 90px;114 display: flex;115 align-items: center;116 justify-content: center;117 font-size: 44px;118 color: #FFFFFF;119 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);120 }121 .key.light { background: #D7E6FF; color: #1a3b74; }122 .key.gray { background: #2B2D31; color: #EDEDED; }123 .key.wide { min-width: 150px; }124 .key.xwide { min-width: 260px; }125 .space { flex: 1; min-width: 420px; }126 .bottom-indicator {127 position: absolute;128 bottom: 22px;129 left: 50%;130 transform: translateX(-50%);131 width: 360px;132 height: 12px;133 border-radius: 8px;134 background: #E6E6E6;135 opacity: 0.9;136 }137 138 /* Utility */139 .muted { color: #9aa0a6; }140 .srch-icon {141 width: 56px; height: 56px; border-radius: 28px; background: #E0E0E0;142 display: flex; align-items: center; justify-content: center;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status bar -->150 <div class="status-bar">151 <div class="status-left">152 <div>6:42</div>153 <div class="notif-dots">••••</div>154 <div style="color:#9e9e9e;">•</div>155 </div>156 <div class="status-right">157 <!-- Wifi -->158 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#5b5b5b" stroke-width="2" stroke-linecap="round"><path d="M3 9c5-4 13-4 18 0"/><path d="M6 12c3-3 9-3 12 0"/><path d="M9 15c2-2 4-2 6 0"/><circle cx="12" cy="18" r="1.2" fill="#5b5b5b"/></svg>159 <!-- Signal -->160 <svg class="icon" viewBox="0 0 24 24" fill="#5b5b5b"><rect x="3" y="13" width="3" height="8" rx="1"/><rect x="8" y="10" width="3" height="11" rx="1"/><rect x="13" y="7" width="3" height="14" rx="1"/><rect x="18" y="4" width="3" height="17" rx="1"/></svg>161 <!-- Battery -->162 <svg class="icon" viewBox="0 0 32 24" fill="none" stroke="#5b5b5b" stroke-width="2">163 <rect x="2" y="6" width="24" height="12" rx="2"></rect>164 <rect x="4" y="8" width="20" height="8" rx="1" fill="#5b5b5b"></rect>165 <rect x="26" y="9" width="4" height="6" rx="1" fill="#5b5b5b" stroke="none"></rect>166 </svg>167 </div>168 </div>169 170 <!-- Search bar -->171 <div class="search-wrap">172 <div class="search-bar">173 <!-- back icon -->174 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">175 <path d="M15 18L9 12l6-6"></path>176 </svg>177 <div class="search-input-text">Heladería Catania</div>178 <!-- clear icon -->179 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">180 <circle cx="12" cy="12" r="10" stroke="#c6c6c6"></circle>181 <path d="M15 9l-6 6M9 9l6 6"></path>182 </svg>183 </div>184 </div>185 186 <!-- Result item -->187 <div class="results">188 <div class="result-item">189 <div class="clock">190 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8E8E8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">191 <circle cx="12" cy="12" r="9"></circle>192 <path d="M12 7v6l4 2"></path>193 </svg>194 </div>195 <div class="result-text">196 <div class="result-title">Heladería Catania</div>197 <div class="result-sub">Rosario, Santa Fe Province, Argentina</div>198 </div>199 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">200 <path d="M7 17L17 7"></path>201 <path d="M9 7h8v8"></path>202 </svg>203 </div>204 </div>205 206 <!-- White empty content area is the rest of the screen above the keyboard -->207 208 <!-- Keyboard -->209 <div class="keyboard">210 <div class="kb-suggest">211 <!-- layout/grid key -->212 <div class="key gray" style="min-width:120px;height:108px;">213 <svg width="40" height="40" viewBox="0 0 24 24" fill="#DADADA">214 <rect x="3" y="3" width="6" height="6" rx="1"></rect>215 <rect x="15" y="3" width="6" height="6" rx="1"></rect>216 <rect x="3" y="15" width="6" height="6" rx="1"></rect>217 <rect x="15" y="15" width="6" height="6" rx="1"></rect>218 </svg>219 </div>220 <div class="chip">Catania</div>221 <div class="key gray" style="min-width:120px;height:108px;">222 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">223 <path d="M12 18c3.3 0 6-2.7 6-6s-2.7-6-6-6-6 2.7-6 6"></path>224 <path d="M12 12v6"></path>225 </svg>226 </div>227 </div>228 229 <div class="kb-rows">230 <div class="kb-row" style="padding: 0 24px;">231 <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>232 <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>233 </div>234 <div class="kb-row" style="padding: 0 64px;">235 <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>236 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>237 </div>238 <div class="kb-row" style="padding: 0 24px;">239 <div class="key wide gray">240 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241 <path d="M12 4l5 6h-3v6h-4v-6H7z"></path>242 </svg>243 </div>244 <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>245 <div class="key wide gray">246 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">247 <path d="M19 7H8l-4 5 4 5h11a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>248 <path d="M10 9l3 3-3 3"></path>249 </svg>250 </div>251 </div>252 <div class="kb-row" style="padding: 0 18px;">253 <div class="key xwide gray">?123</div>254 <div class="key gray" style="min-width:110px">,</div>255 <div class="key gray" style="min-width:110px">256 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round">257 <circle cx="12" cy="12" r="7"></circle>258 <path d="M9 11c0-1 1-2 3-2s3 1 3 2"></path>259 <circle cx="9.5" cy="10.5" r="1" fill="#EDEDED" stroke="none"></circle>260 <circle cx="14.5" cy="10.5" r="1" fill="#EDEDED" stroke="none"></circle>261 <path d="M9 14c1.2 1 4.8 1 6 0" stroke-linecap="round"></path>262 </svg>263 </div>264 <div class="key space gray" style="min-width:460px"></div>265 <div class="key gray" style="min-width:110px">.</div>266 <div class="key light" style="min-width:120px">267 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#1a3b74" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">268 <circle cx="11" cy="11" r="7"></circle>269 <path d="M16.5 16.5L20 20"></path>270 </svg>271 </div>272 </div>273 </div>274 <div class="bottom-indicator"></div>275 </div>276 277</div>278</body>279</html>