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=device-width, initial-scale=1.0"/>6<title>Dark Search UI with Keyboard</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: #0d0d0f;15 /* subtle diagonal sheen like the screenshot */16 background-image:17 linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0) 60%),18 linear-gradient(135deg, #151517 0%, #0e0e10 60%);19 }20 21 /* Status Bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 right: 0;27 height: 96px;28 padding: 0 26px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #ffffff;33 font-size: 36px;34 letter-spacing: 0.5px;35 }36 .status-left, .status-right {37 display: flex; align-items: center; gap: 22px;38 }39 .icon-sml { width: 36px; height: 36px; opacity: 0.9; }40 41 /* Toolbar / Search */42 .toolbar {43 position: absolute;44 top: 96px;45 left: 0;46 right: 0;47 height: 140px;48 display: flex;49 align-items: center;50 padding: 0 24px;51 color: #eaeaea;52 }53 .back-btn {54 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;55 }56 .search-area {57 flex: 1;58 display: flex;59 align-items: center;60 gap: 18px;61 padding: 0 12px;62 }63 .search-icon { width: 54px; height: 54px; opacity: 0.9; }64 .search-placeholder {65 flex: 1;66 color: #bdbdbd;67 font-size: 40px;68 }69 .close-btn {70 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;71 }72 .divider {73 position: absolute;74 top: 224px;75 left: 24px;76 right: 24px;77 height: 2px;78 background: #4f4f50;79 opacity: 0.7;80 }81 82 /* Content area (blank) */83 .content {84 position: absolute;85 top: 226px;86 left: 0; right: 0;87 bottom: 920px; /* space reserved for keyboard + nav bar */88 background: #0f0f10;89 }90 91 /* Keyboard */92 .keyboard {93 position: absolute;94 left: 0; right: 0;95 bottom: 120px; /* leave space for gesture bar */96 height: 920px;97 background: #1b1b1e;98 border-top: 1px solid #2a2a2d;99 box-shadow: 0 -8px 30px rgba(0,0,0,0.5) inset;100 padding: 18px 20px 20px;101 display: flex;102 flex-direction: column;103 gap: 18px;104 }105 106 .kb-tools {107 height: 96px;108 display: flex;109 align-items: center;110 justify-content: space-between;111 padding: 0 8px;112 }113 .tool {114 width: 88px; height: 88px;115 display: flex; align-items: center; justify-content: center;116 color: #eaeaea;117 background: #2a2a2d;118 border-radius: 18px;119 font-size: 30px;120 }121 .tool.round { border-radius: 50%; }122 .tool-label { font-weight: 700; letter-spacing: 2px; }123 124 .kb-rows {125 flex: 1;126 display: grid;127 grid-template-rows: repeat(4, 1fr);128 gap: 16px;129 }130 .row { display: grid; gap: 16px; }131 132 .row.row-1 { grid-template-columns: repeat(10, 1fr); }133 .row.row-2 { grid-template-columns: repeat(9, 1fr); padding: 0 46px; }134 .row.row-3 { grid-template-columns: 1.5fr repeat(7, 1fr) 1.8fr; }135 .row.row-4 { grid-template-columns: 1.7fr 1fr 1fr 5fr 1fr 1.9fr; }136 137 .key {138 background: #2b2b2f;139 color: #f1f1f1;140 border-radius: 22px;141 display: flex; align-items: center; justify-content: center;142 font-size: 44px;143 box-shadow: 0 2px 0 rgba(0,0,0,0.35);144 }145 .key.alt { background: #394045; color: #e5e9ec; }146 .key.action { background: #bcd5f7; color: #0a0f18; font-weight: 700; }147 .key.small { font-size: 36px; }148 .key.icon { padding: 0; }149 150 /* Bottom gesture bar */151 .nav-bar {152 position: absolute;153 left: 0; right: 0; bottom: 0;154 height: 120px;155 display: flex; align-items: center; justify-content: center;156 background: transparent;157 }158 .gesture-pill {159 width: 260px; height: 12px;160 background: #e6e6e6; border-radius: 8px; opacity: 0.9;161 }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Status Bar -->168 <div class="status-bar">169 <div class="status-left">170 <div>8:10</div>171 <!-- small left icon -->172 <svg class="icon-sml" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>173 </div>174 <div class="status-right">175 <!-- wifi -->176 <svg class="icon-sml" viewBox="0 0 24 24">177 <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>178 <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>179 <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>180 <circle cx="12" cy="19" r="1.6" fill="#fff"/>181 </svg>182 <!-- battery -->183 <svg class="icon-sml" viewBox="0 0 28 24">184 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>185 <rect x="23" y="9" width="3" height="6" rx="1" ry="1" fill="#fff"/>186 </svg>187 </div>188 </div>189 190 <!-- Toolbar / Search -->191 <div class="toolbar">192 <div class="back-btn">193 <svg width="48" height="48" viewBox="0 0 24 24">194 <path d="M14 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 198 <div class="search-area">199 <svg class="search-icon" viewBox="0 0 24 24">200 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"/>201 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>202 </svg>203 <div class="search-placeholder">Search</div>204 </div>205 206 <div class="close-btn">207 <svg width="54" height="54" viewBox="0 0 24 24">208 <path d="M6 6l12 12M18 6l-12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>209 </svg>210 </div>211 </div>212 <div class="divider"></div>213 214 <!-- Content Area -->215 <div class="content"></div>216 217 <!-- Keyboard -->218 <div class="keyboard">219 <!-- Tools Row -->220 <div class="kb-tools">221 <div class="tool round">222 <svg width="44" height="44" viewBox="0 0 24 24">223 <rect x="3" y="3" width="7" height="7" fill="#eaeaea"/>224 <rect x="14" y="3" width="7" height="7" fill="#eaeaea"/>225 <rect x="3" y="14" width="7" height="7" fill="#eaeaea"/>226 <rect x="14" y="14" width="7" height="7" fill="#eaeaea"/>227 </svg>228 </div>229 <div class="tool round">230 <svg width="44" height="44" viewBox="0 0 24 24">231 <circle cx="12" cy="9" r="3" fill="#eaeaea"/>232 <path d="M5 18c2-3 12-3 14 0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>233 </svg>234 </div>235 <div class="tool"><span class="tool-label">GIF</span></div>236 <div class="tool round">237 <svg width="44" height="44" viewBox="0 0 24 24">238 <circle cx="12" cy="12" r="9" fill="none" stroke="#eaeaea" stroke-width="2"/>239 <path d="M12 8v8M8 12h8" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="tool round">243 <svg width="44" height="44" viewBox="0 0 24 24">244 <path d="M4 12h9l-3 3M20 12h-9l3-3" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>245 <text x="4" y="9" font-size="6" fill="#eaeaea">G</text>246 </svg>247 </div>248 <div class="tool round">249 <svg width="44" height="44" viewBox="0 0 24 24">250 <circle cx="12" cy="12" r="9" fill="none" stroke="#eaeaea" stroke-width="2"/>251 <circle cx="9" cy="9" r="2" fill="#eaeaea"/>252 <circle cx="15" cy="15" r="2" fill="#eaeaea"/>253 </svg>254 </div>255 <div class="tool round">256 <svg width="44" height="44" viewBox="0 0 24 24">257 <path d="M12 3v8a4 4 0 0 0 4 4" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>258 <path d="M19 15v4a3 3 0 0 1-3 3h0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>259 </svg>260 </div>261 </div>262 263 <!-- Keys -->264 <div class="kb-rows">265 <!-- Row 1 -->266 <div class="row row-1">267 <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>268 <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>269 </div>270 271 <!-- Row 2 -->272 <div class="row row-2">273 <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>274 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>275 </div>276 277 <!-- Row 3 -->278 <div class="row row-3">279 <div class="key alt small">280 <svg width="42" height="42" viewBox="0 0 24 24">281 <path d="M6 12h12M6 12l4-4M6 12l4 4" stroke="#e5e9ec" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>282 </svg>283 </div>284 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>285 <div class="key">b</div><div class="key">n</div><div class="key">m</div>286 <div class="key alt icon">287 <svg width="52" height="52" viewBox="0 0 24 24">288 <path d="M6 6l12 12M18 6l-12 12" stroke="#e5e9ec" stroke-width="2" stroke-linecap="round"/>289 </svg>290 </div>291 </div>292 293 <!-- Row 4 -->294 <div class="row row-4">295 <div class="key alt">?123</div>296 <div class="key small">,</div>297 <div class="key small">298 <svg width="36" height="36" viewBox="0 0 24 24">299 <circle cx="12" cy="12" r="2.5" fill="#f1f1f1"/>300 </svg>301 </div>302 <div class="key"> </div>303 <div class="key small">.</div>304 <div class="key action icon">305 <svg width="44" height="44" viewBox="0 0 24 24">306 <path d="M5 12h10M12 5l7 7-7 7" stroke="#0a0f18" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 </div>309 </div>310 </div>311 </div>312 313 <!-- Gesture bar -->314 <div class="nav-bar">315 <div class="gesture-pill"></div>316 </div>317</div>318</body>319</html>