GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #22252B; /* overall dark background */15 border-radius: 24px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.4);17 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;18 color: #E6E6E6;19 }20 21 /* Status bar */22 .statusbar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 96px;28 background: #1E2227;29 display: flex;30 align-items: center;31 justify-content: space-between;32 padding: 0 36px;33 box-sizing: border-box;34 letter-spacing: 0.5px;35 }36 .status-left {37 display: flex;38 align-items: center;39 gap: 14px;40 font-weight: 600;41 font-size: 34px;42 }43 .status-right {44 display: flex;45 align-items: center;46 gap: 22px;47 }48 .status-icon svg { display: block; }49 50 /* Top search/app bar */51 .appbar {52 position: absolute;53 top: 96px;54 left: 0;55 width: 1080px;56 height: 120px;57 background: #262A31;58 display: flex;59 align-items: center;60 padding: 0 24px;61 box-sizing: border-box;62 border-bottom: 1px solid #303640;63 }64 .appbar .left, .appbar .right {65 display: flex;66 align-items: center;67 }68 .appbar .left { gap: 18px; }69 .appbar .right { margin-left: auto; gap: 22px; }70 .query {71 font-size: 48px;72 color: #EDEDED;73 }74 .app-icon svg { display: block; }75 76 /* Result list area */77 .results {78 position: absolute;79 top: 216px; /* statusbar + appbar */80 left: 0;81 right: 0;82 bottom: 980px; /* leave room for keyboard & navbar */83 padding: 24px 30px;84 box-sizing: border-box;85 }86 .result-item {87 display: flex;88 align-items: center;89 gap: 26px;90 padding: 22px 10px;91 }92 .avatar {93 width: 100px;94 height: 100px;95 border-radius: 50%;96 background: #3AD0E0;97 color: #0D2730;98 display: flex;99 align-items: center;100 justify-content: center;101 font-weight: 700;102 font-size: 56px;103 }104 .result-text {105 display: flex;106 flex-direction: column;107 gap: 6px;108 }109 .result-title {110 font-size: 44px;111 color: #8AB4F8; /* Google-y blue */112 font-weight: 600;113 }114 115 /* Keyboard container */116 .keyboard {117 position: absolute;118 left: 0;119 bottom: 100px; /* leave room for gesture bar */120 width: 1080px;121 height: 980px;122 background: #14171C;123 border-top-left-radius: 24px;124 border-top-right-radius: 24px;125 box-shadow: 0 -12px 20px rgba(0,0,0,0.35) inset;126 }127 .kb-suggestions {128 height: 120px;129 display: flex;130 align-items: center;131 gap: 16px;132 padding: 0 24px;133 box-sizing: border-box;134 color: #CFCFCF;135 font-size: 36px;136 }137 .suggest-icon {138 width: 72px;139 height: 72px;140 background: #2A2E36;141 border-radius: 16px;142 display: flex;143 align-items: center;144 justify-content: center;145 }146 .chip {147 padding: 18px 26px;148 background: #1E2227;149 border: 1px solid #2C3139;150 border-radius: 22px;151 }152 153 .kb-rows {154 padding: 10px 18px 0;155 box-sizing: border-box;156 }157 .row {158 display: flex;159 justify-content: space-between;160 gap: 12px;161 margin: 18px 8px;162 }163 .key {164 height: 120px;165 flex: 1;166 min-width: 82px;167 background: #2A2E36;168 border-radius: 14px;169 border: 1px solid #303542;170 color: #EEE;171 display: flex;172 align-items: center;173 justify-content: center;174 font-size: 44px;175 font-weight: 600;176 }177 .key.small { min-width: 72px; }178 .key.wide { flex: 1.3; }179 .key.special {180 background: #23262D;181 color: #D9D9D9;182 }183 .key.light {184 background: #D0D4DC;185 color: #1A1D22;186 font-weight: 700;187 }188 .key.circle {189 height: 120px;190 width: 120px;191 flex: 0 0 120px;192 border-radius: 60px;193 background: #C9D3F6;194 color: #1A2230;195 border: none;196 }197 .key.circle.blue {198 background: #CFE0FF;199 color: #10233A;200 }201 202 /* Gesture bar */203 .gesture {204 position: absolute;205 bottom: 30px;206 left: 50%;207 transform: translateX(-50%);208 width: 380px;209 height: 12px;210 border-radius: 8px;211 background: #E6E6E6;212 opacity: 0.85;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="statusbar">221 <div class="status-left">222 <span>8:32</span>223 <span class="status-icon">224 <!-- Cloud icon -->225 <svg width="40" height="40" viewBox="0 0 48 48">226 <path d="M18 30h14a8 8 0 0 0 0-16c-1 0-2 0-3 1a10 10 0 0 0-18 5c-4 1-7 4-7 8a8 8 0 0 0 8 8h6" fill="none" stroke="#E6E6E6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 </span>229 </div>230 <div class="status-right">231 <span class="status-icon">232 <!-- WiFi icon -->233 <svg width="44" height="44" viewBox="0 0 48 48">234 <path d="M6 18c9-8 27-8 36 0" stroke="#E6E6E6" stroke-width="3" fill="none" stroke-linecap="round"/>235 <path d="M12 24c6-6 18-6 24 0" stroke="#E6E6E6" stroke-width="3" fill="none" stroke-linecap="round"/>236 <path d="M18 30c3-3 9-3 12 0" stroke="#E6E6E6" stroke-width="3" fill="none" stroke-linecap="round"/>237 <circle cx="24" cy="36" r="3" fill="#E6E6E6"/>238 </svg>239 </span>240 <span class="status-icon">241 <!-- Battery icon -->242 <svg width="54" height="44" viewBox="0 0 60 48">243 <rect x="5" y="10" width="44" height="28" rx="4" stroke="#E6E6E6" stroke-width="3" fill="none"/>244 <rect x="8" y="13" width="30" height="22" rx="3" fill="#E6E6E6"/>245 <rect x="51" y="16" width="6" height="16" rx="2" fill="#E6E6E6"/>246 </svg>247 </span>248 </div>249 </div>250 251 <!-- App/Search Bar -->252 <div class="appbar">253 <div class="left">254 <span class="app-icon">255 <!-- Back arrow -->256 <svg width="64" height="64" viewBox="0 0 48 48">257 <path d="M28 12L16 24l12 12" stroke="#EDEDED" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </span>260 <span class="query">Con2</span>261 </div>262 <div class="right">263 <span class="app-icon">264 <!-- Close icon -->265 <svg width="56" height="56" viewBox="0 0 48 48">266 <path d="M14 14l20 20M34 14L14 34" stroke="#DADADA" stroke-width="4" stroke-linecap="round"/>267 </svg>268 </span>269 <span class="app-icon">270 <!-- Mic icon -->271 <svg width="56" height="56" viewBox="0 0 48 48">272 <rect x="18" y="10" width="12" height="20" rx="6" fill="none" stroke="#DADADA" stroke-width="3"/>273 <path d="M12 22c0 8 6 12 12 12s12-4 12-12M24 34v6M18 40h12" stroke="#DADADA" stroke-width="3" fill="none" stroke-linecap="round"/>274 </svg>275 </span>276 </div>277 </div>278 279 <!-- Results -->280 <div class="results">281 <div class="result-item">282 <div class="avatar">C</div>283 <div class="result-text">284 <div class="result-title">Con2</div>285 </div>286 </div>287 </div>288 289 <!-- Keyboard -->290 <div class="keyboard">291 <!-- Suggestions row -->292 <div class="kb-suggestions">293 <div class="suggest-icon">294 <!-- Grid icon -->295 <svg width="48" height="48" viewBox="0 0 48 48">296 <rect x="6" y="6" width="12" height="12" rx="2" fill="#AEB4BE"/>297 <rect x="30" y="6" width="12" height="12" rx="2" fill="#AEB4BE"/>298 <rect x="6" y="30" width="12" height="12" rx="2" fill="#AEB4BE"/>299 <rect x="30" y="30" width="12" height="12" rx="2" fill="#AEB4BE"/>300 </svg>301 </div>302 <div class="chip">Con2</div>303 <div class="chip">Co 2nd</div>304 <div class="chip">Co 2D</div>305 </div>306 307 <div class="kb-rows">308 <!-- Row 1 -->309 <div class="row">310 <div class="key">q</div>311 <div class="key">w</div>312 <div class="key">e</div>313 <div class="key">r</div>314 <div class="key">t</div>315 <div class="key">y</div>316 <div class="key">u</div>317 <div class="key">i</div>318 <div class="key">o</div>319 <div class="key">p</div>320 </div>321 322 <!-- Row 2 -->323 <div class="row">324 <div class="key">a</div>325 <div class="key">s</div>326 <div class="key">d</div>327 <div class="key">f</div>328 <div class="key">g</div>329 <div class="key">h</div>330 <div class="key">j</div>331 <div class="key">k</div>332 <div class="key">l</div>333 </div>334 335 <!-- Row 3 -->336 <div class="row">337 <div class="key special wide">shift</div>338 <div class="key">z</div>339 <div class="key">x</div>340 <div class="key">c</div>341 <div class="key">v</div>342 <div class="key">b</div>343 <div class="key">n</div>344 <div class="key">m</div>345 <div class="key special wide">346 <!-- Backspace icon -->347 <svg width="44" height="44" viewBox="0 0 48 48">348 <path d="M14 14l-8 10 8 10h22a4 4 0 0 0 4-4V18a4 4 0 0 0-4-4H14z" fill="none" stroke="#DADADA" stroke-width="3" stroke-linejoin="round"/>349 <path d="M22 20l8 8M30 20l-8 8" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/>350 </svg>351 </div>352 </div>353 354 <!-- Row 4 -->355 <div class="row" style="align-items:center;">356 <div class="key circle light">?123</div>357 <div class="key special">,</div>358 <div class="key special">😊</div>359 <div class="key wide special" style="flex:2.6;">space</div>360 <div class="key special">.</div>361 <div class="key circle blue">362 <!-- Search icon -->363 <svg width="48" height="48" viewBox="0 0 48 48">364 <circle cx="20" cy="20" r="12" stroke="#173255" stroke-width="3" fill="none"/>365 <path d="M30 30l10 10" stroke="#173255" stroke-width="3" stroke-linecap="round"/>366 </svg>367 </div>368 </div>369 </div>370 </div>371 372 <!-- Bottom gesture bar -->373 <div class="gesture"></div>374 375</div>376</body>377</html>