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 with Keyboard - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0f0f10;13 color: #fff;14 }15 /* Top decorative dark diagonal */16 .top-bg {17 position: absolute; inset: 0 0 auto 0; height: 320px;18 background: linear-gradient(135deg, #1b1b1d 0%, #121214 45%, #101012 80%);19 opacity: 0.95;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute; top: 18px; left: 24px; right: 24px; height: 64px;25 display: flex; align-items: center; justify-content: space-between;26 color: #eaeaea; font-size: 34px; letter-spacing: 0.5px;27 }28 .status-right { display: flex; align-items: center; gap: 18px; }29 .status-icon svg { width: 38px; height: 38px; opacity: 0.95; }30 31 /* Search area */32 .search-area {33 position: absolute; top: 120px; left: 24px; right: 24px;34 padding: 8px 6px;35 }36 .search-row {37 display: flex; align-items: center; gap: 16px;38 color: #e1e1e1;39 }40 .icon-btn svg { width: 56px; height: 56px; }41 .search-input {42 flex: 1;43 padding: 10px 4px 16px 4px;44 border-bottom: 2px solid #4b4b4f;45 position: relative;46 }47 .search-input .caret {48 position: absolute; left: 44px; top: 10px; width: 3px; height: 38px; background: #e53935; border-radius: 2px;49 }50 .search-placeholder {51 display: inline-flex; align-items: center; gap: 10px; color: #bdbdbf; font-size: 38px;52 }53 .clear-btn svg { width: 52px; height: 52px; opacity: 0.9; }54 55 /* Content area (blank dark area) */56 .content {57 position: absolute; top: 210px; left: 0; right: 0; bottom: 860px;58 background: #111112;59 }60 61 /* Keyboard */62 .keyboard {63 position: absolute; left: 0; right: 0; bottom: 70px; height: 900px;64 background: #1a1b1d;65 border-top: 1px solid #2a2b2e;66 }67 .kb-toolbar {68 height: 120px; display: flex; align-items: center; justify-content: space-around;69 padding: 0 18px; color: #e9e9e9; font-size: 34px;70 border-bottom: 1px solid #26272a;71 }72 .kb-toolbar .tool {73 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;74 color: #efefef; opacity: 0.9;75 }76 .kb-toolbar svg { width: 64px; height: 64px; }77 78 .keys { padding: 22px 24px 0 24px; }79 .row { display: flex; justify-content: space-between; margin-bottom: 18px; }80 .key {81 width: 90px; height: 120px; background: #2a2b2e; border-radius: 18px;82 color: #eeeeee; font-size: 42px; display: flex; align-items: center; justify-content: center;83 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);84 }85 .row.row2 { padding: 0 42px; }86 .wide { width: 160px; }87 .shift, .backspace { width: 140px; }88 .space { flex: 1; margin: 0 16px; border-radius: 22px; height: 120px; }89 .circle-key {90 width: 120px; height: 120px; border-radius: 60px; background: #bcd6ff; color: #1b1b1d; font-weight: 600; font-size: 34px;91 }92 .enter { background: #bcd6ff; color: #0d0d0f; }93 .key.secondary { background: #222327; color: #cfcfd3; }94 .dot { width: 90px; }95 .comma { width: 60px; }96 97 /* Bottom navigation pill */98 .nav-pill {99 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);100 width: 180px; height: 12px; border-radius: 8px; background: #e7e7e7; opacity: 0.85;101 }102</style>103</head>104<body>105<div id="render-target">106 <div class="top-bg"></div>107 108 <!-- Status bar -->109 <div class="status-bar">110 <div class="status-left">8:10</div>111 <div class="status-right">112 <span class="status-icon">113 <!-- WiFi -->114 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">115 <path d="M2 8c5-4 15-4 20 0"></path>116 <path d="M5 12c4-3 10-3 14 0"></path>117 <path d="M8 16c3-2 5-2 8 0"></path>118 <circle cx="12" cy="20" r="2" fill="#fff"></circle>119 </svg>120 </span>121 <span class="status-icon">122 <!-- Battery -->123 <svg viewBox="0 0 28 18" fill="none" stroke="#fff" stroke-width="2">124 <rect x="1" y="3" width="22" height="12" rx="2"></rect>125 <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"></rect>126 <rect x="24" y="7" width="3" height="6" rx="1" fill="#fff"></rect>127 </svg>128 </span>129 </div>130 </div>131 132 <!-- Search area -->133 <div class="search-area">134 <div class="search-row">135 <span class="icon-btn">136 <!-- Back Arrow -->137 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">138 <path d="M15 4L7 12l8 8"></path>139 </svg>140 </span>141 <div class="search-input">142 <div class="search-placeholder">143 <!-- Magnifier -->144 <svg viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2">145 <circle cx="10" cy="10" r="6"></circle>146 <path d="M15 15l6 6"></path>147 </svg>148 <span>Search</span>149 </div>150 <span class="caret"></span>151 </div>152 <span class="clear-btn">153 <!-- Close X -->154 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round">155 <path d="M5 5l14 14"></path>156 <path d="M19 5L5 19"></path>157 </svg>158 </span>159 </div>160 </div>161 162 <!-- Blank content -->163 <div class="content"></div>164 165 <!-- Keyboard -->166 <div class="keyboard">167 <!-- Toolbar icons -->168 <div class="kb-toolbar">169 <div class="tool">170 <!-- 3x3 grid -->171 <svg viewBox="0 0 24 24" fill="#e9e9e9">172 <rect x="3" y="3" width="4" height="4" rx="1"></rect>173 <rect x="10" y="3" width="4" height="4" rx="1"></rect>174 <rect x="17" y="3" width="4" height="4" rx="1"></rect>175 <rect x="3" y="10" width="4" height="4" rx="1"></rect>176 <rect x="10" y="10" width="4" height="4" rx="1"></rect>177 <rect x="17" y="10" width="4" height="4" rx="1"></rect>178 <rect x="3" y="17" width="4" height="4" rx="1"></rect>179 <rect x="10" y="17" width="4" height="4" rx="1"></rect>180 <rect x="17" y="17" width="4" height="4" rx="1"></rect>181 </svg>182 </div>183 <div class="tool">184 <!-- Emoji -->185 <svg viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">186 <circle cx="12" cy="12" r="9"></circle>187 <circle cx="9" cy="10" r="1.5" fill="#e9e9e9"></circle>188 <circle cx="15" cy="10" r="1.5" fill="#e9e9e9"></circle>189 <path d="M8 15c3 2 5 2 8 0" stroke-linecap="round"></path>190 </svg>191 </div>192 <div class="tool" style="font-weight:700;">GIF</div>193 <div class="tool">194 <!-- Gear -->195 <svg viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">196 <circle cx="12" cy="12" r="3"></circle>197 <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1"></path>198 </svg>199 </div>200 <div class="tool">201 <!-- Translate (G with small box) -->202 <svg viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">203 <rect x="2" y="3" width="11" height="14" rx="2" stroke="#e9e9e9"></rect>204 <text x="7" y="12" text-anchor="middle" font-size="10" fill="#e9e9e9" font-family="Arial">G</text>205 <rect x="15" y="7" width="7" height="10" rx="2" stroke="#e9e9e9"></rect>206 </svg>207 </div>208 <div class="tool">209 <!-- Palette -->210 <svg viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">211 <path d="M12 3a9 9 0 1 0 0 18 3 3 0 0 0 0-6h-2"></path>212 <circle cx="7.5" cy="10" r="1.3" fill="#e9e9e9"></circle>213 <circle cx="12" cy="8" r="1.3" fill="#e9e9e9"></circle>214 <circle cx="16.5" cy="10" r="1.3" fill="#e9e9e9"></circle>215 </svg>216 </div>217 <div class="tool">218 <!-- Mic -->219 <svg viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">220 <rect x="9" y="3" width="6" height="10" rx="3"></rect>221 <path d="M5 11v1a7 7 0 0 0 14 0v-1M12 21v-3"></path>222 </svg>223 </div>224 </div>225 226 <div class="keys">227 <!-- Row 1 -->228 <div class="row">229 <div class="key">q</div>230 <div class="key">w</div>231 <div class="key">e</div>232 <div class="key">r</div>233 <div class="key">t</div>234 <div class="key">y</div>235 <div class="key">u</div>236 <div class="key">i</div>237 <div class="key">o</div>238 <div class="key">p</div>239 </div>240 241 <!-- Row 2 -->242 <div class="row row2">243 <div class="key">a</div>244 <div class="key">s</div>245 <div class="key">d</div>246 <div class="key">f</div>247 <div class="key">g</div>248 <div class="key">h</div>249 <div class="key">j</div>250 <div class="key">k</div>251 <div class="key">l</div>252 </div>253 254 <!-- Row 3 -->255 <div class="row">256 <div class="key shift">257 <!-- Shift -->258 <svg viewBox="0 0 24 24" width="42" height="42" stroke="#eaeaea" stroke-width="2" fill="none">259 <path d="M12 4l7 8h-4v6H9v-6H5z"></path>260 </svg>261 </div>262 <div class="key">z</div>263 <div class="key">x</div>264 <div class="key">c</div>265 <div class="key">v</div>266 <div class="key">b</div>267 <div class="key">n</div>268 <div class="key">m</div>269 <div class="key backspace">270 <!-- Backspace -->271 <svg viewBox="0 0 24 24" width="46" height="46" stroke="#eaeaea" stroke-width="2" fill="none">272 <path d="M22 6H10l-6 6 6 6h12z"></path>273 <path d="M13 9l6 6M19 9l-6 6"></path>274 </svg>275 </div>276 </div>277 278 <!-- Row 4 -->279 <div class="row">280 <div class="key circle-key">?123</div>281 <div class="key comma">,</div>282 <div class="key secondary" style="width:90px;">283 <!-- Smiley -->284 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#cfcfd3" stroke-width="2">285 <circle cx="12" cy="12" r="9"></circle>286 <path d="M8 14c3 2 5 2 8 0"></path>287 </svg>288 </div>289 <div class="key space"></div>290 <div class="key dot">.</div>291 <div class="key circle-key enter">292 <!-- Enter arrow -->293 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#0d0d0f" stroke-width="2">294 <path d="M21 7v6a3 3 0 0 1-3 3H4"></path>295 <path d="M8 10l-4 4 4 4"></path>296 </svg>297 </div>298 </div>299 </div>300 </div>301 302 <div class="nav-pill"></div>303</div>304</body>305</html>