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 Screen 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; height:2400px;11 position:relative; overflow:hidden;12 background:#121212; color:#EDEDED;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:80px; padding:0 32px;19 display:flex; align-items:center; justify-content:space-between;20 color:#EDEDED; font-size:34px; letter-spacing:0.5px;21 }22 .status-right {23 display:flex; align-items:center; gap:22px;24 font-size:30px;25 }26 .status-icon { opacity:0.85; }27 .battery {28 display:flex; align-items:center; gap:8px;29 }30 .battery svg { width:44px; height:26px; }31 .wifi svg, .dnd svg { width:34px; height:34px; }32 33 /* Header */34 .header {35 position:absolute; top:96px; left:32px; right:32px;36 height:120px; display:flex; align-items:center; gap:24px;37 }38 .header .title {39 font-size:68px; font-weight:500; color:#DADADA;40 }41 .icon-btn {42 width:72px; height:72px; border-radius:36px;43 display:flex; align-items:center; justify-content:center;44 }45 .icon-btn svg { width:56px; height:56px; stroke:#EDEDED; }46 47 /* Keyboard */48 .keyboard {49 position:absolute; left:0; right:0; bottom:0;50 height:960px; background:#171717;51 border-top-left-radius:24px; border-top-right-radius:24px;52 box-shadow:0 -6px 20px rgba(0,0,0,0.35);53 padding:18px 24px 28px;54 }55 56 .kb-top-row {57 height:120px; display:flex; align-items:center; justify-content:space-between;58 padding:0 16px; color:#BEBEBE;59 }60 .kb-top-item {61 display:flex; align-items:center; justify-content:center;62 gap:8px; color:#DFDFDF; font-size:36px;63 }64 .kb-top-item svg { width:48px; height:48px; fill:none; stroke:#DFDFDF; }65 66 .keys { padding:12px 0; }67 68 .row {69 display:flex; gap:12px; padding:10px 0;70 justify-content:center;71 }72 .row.row1 { padding-left:0; }73 .row.row2 { padding-left:56px; padding-right:56px; }74 .row.row3 { padding-left:120px; padding-right:120px; }75 76 .key {77 width:84px; height:128px; background:#2B2B2B; border-radius:18px;78 display:flex; align-items:center; justify-content:center;79 color:#E7E7E7; font-size:46px; box-shadow:0 2px 0 rgba(255,255,255,0.04) inset;80 }81 .key.small { height:116px; font-size:40px; }82 .key.wide { width:140px; }83 .key.space { flex:0 0 360px; height:128px; }84 .key.gray { background:#3A3A3A; }85 .key-label-sub { font-size:28px; opacity:0.5; margin-left:6px; }86 87 .circle-key {88 width:108px; height:108px; border-radius:54px;89 background:#C9F58F; color:#1A1A1A; font-weight:700;90 display:flex; align-items:center; justify-content:center;91 font-size:40px;92 }93 .circle-key.right {94 background:#C9F58F; color:#121212;95 }96 .period { font-size:60px; }97 98 .kb-bottom {99 display:flex; align-items:center; gap:12px;100 padding:18px 8px 8px; justify-content:space-between;101 }102 .kb-bottom-left, .kb-bottom-right {103 display:flex; align-items:center; gap:12px;104 }105 106 .mic-btn {107 width:84px; height:84px; border-radius:42px;108 background:#2A2A2A; display:flex; align-items:center; justify-content:center;109 }110 .mic-btn svg { width:44px; height:44px; stroke:#EDEDED; }111 112 /* Gesture bar */113 .gesture {114 position:absolute; bottom:18px; left:50%;115 transform:translateX(-50%);116 width:240px; height:10px; border-radius:6px; background:#EAEAEA; opacity:0.85;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="status-left">11:50</div>126 <div class="status-right">127 <div class="dnd status-icon">128 <svg viewBox="0 0 24 24">129 <circle cx="12" cy="12" r="10" stroke="#EDEDED" stroke-width="2" fill="none"></circle>130 <rect x="6" y="11" width="12" height="2" fill="#EDEDED"></rect>131 </svg>132 </div>133 <div class="wifi status-icon">134 <svg viewBox="0 0 24 24">135 <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"></path>136 <circle cx="12" cy="19" r="1.6" fill="#EDEDED"></circle>137 </svg>138 </div>139 <div class="battery">140 <svg viewBox="0 0 28 16">141 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>142 <rect x="4" y="4" width="16" height="8" fill="#EDEDED"></rect>143 <rect x="24" y="5" width="3" height="6" rx="1" fill="#EDEDED"></rect>144 </svg>145 <span>100%</span>146 </div>147 </div>148 </div>149 150 <!-- Header -->151 <div class="header">152 <div class="icon-btn">153 <svg viewBox="0 0 48 48">154 <path d="M30 10 L14 24 L30 38" stroke="#EDEDED" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>155 </svg>156 </div>157 <div class="title">Search</div>158 </div>159 160 <!-- Keyboard -->161 <div class="keyboard">162 <!-- accessory row -->163 <div class="kb-top-row">164 <div class="kb-top-item">165 <svg viewBox="0 0 24 24">166 <rect x="3" y="3" width="7" height="7" rx="1"></rect>167 <rect x="14" y="3" width="7" height="7" rx="1"></rect>168 <rect x="3" y="14" width="7" height="7" rx="1"></rect>169 <rect x="14" y="14" width="7" height="7" rx="1"></rect>170 </svg>171 </div>172 <div class="kb-top-item">173 <svg viewBox="0 0 24 24">174 <circle cx="12" cy="12" r="9"></circle>175 <path d="M8 12c1.5 1.2 6.5 1.2 8 0" stroke="#DFDFDF" stroke-width="1.6" fill="none" stroke-linecap="round"></path>176 <circle cx="9" cy="10" r="1.2" fill="#DFDFDF"></circle>177 <circle cx="15" cy="10" r="1.2" fill="#DFDFDF"></circle>178 </svg>179 </div>180 <div class="kb-top-item" style="font-weight:700;">GIF</div>181 <div class="kb-top-item">182 <svg viewBox="0 0 24 24">183 <circle cx="12" cy="12" r="7" stroke="#DFDFDF" stroke-width="2" fill="none"></circle>184 <path d="M12 5v2M12 17v2M5 12h2M17 12h2M8 8l1 1M15 15l1 1M8 16l1-1M15 9l1-1" stroke="#DFDFDF" stroke-width="2" stroke-linecap="round"></path>185 </svg>186 </div>187 <div class="kb-top-item">188 <svg viewBox="0 0 24 24">189 <text x="4" y="16" fill="#DFDFDF" font-size="12" font-family="Arial">G</text>190 <path d="M14 8l6 0M20 8v6" stroke="#DFDFDF" stroke-width="1.8"></path>191 </svg>192 </div>193 <div class="kb-top-item">194 <svg viewBox="0 0 24 24">195 <path d="M12 3a9 9 0 1 0 0 18c3 0 5-2 5-4 0-2-2-3-3-3-2 0-3-1-3-3 0-2 1-3 3-3" stroke="#DFDFDF" stroke-width="2" fill="none" stroke-linecap="round"></path>196 <circle cx="17" cy="16" r="1.6" fill="#DFDFDF"></circle>197 </svg>198 </div>199 <div class="kb-top-item mic-btn">200 <svg viewBox="0 0 24 24">201 <rect x="9" y="6" width="6" height="8" rx="3" stroke="#EDEDED" stroke-width="2" fill="none"></rect>202 <path d="M6 11c0 4 12 4 12 0M12 15v4M9 19h6" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"></path>203 </svg>204 </div>205 </div>206 207 <div class="keys">208 <div class="row row1">209 <div class="key">q</div>210 <div class="key">w</div>211 <div class="key">e</div>212 <div class="key">r</div>213 <div class="key">t</div>214 <div class="key">y</div>215 <div class="key">u</div>216 <div class="key">i</div>217 <div class="key">o</div>218 <div class="key">p</div>219 </div>220 221 <div class="row row2">222 <div class="key">a</div>223 <div class="key">s</div>224 <div class="key">d</div>225 <div class="key">f</div>226 <div class="key">g</div>227 <div class="key">h</div>228 <div class="key">j</div>229 <div class="key">k</div>230 <div class="key">l</div>231 </div>232 233 <div class="row row3">234 <div class="key wide gray">235 <svg viewBox="0 0 24 24" style="width:40px;height:40px;">236 <path d="M12 6l6 6H6z" fill="#EDEDED"></path>237 </svg>238 </div>239 <div class="key">z</div>240 <div class="key">x</div>241 <div class="key">c</div>242 <div class="key">v</div>243 <div class="key">b</div>244 <div class="key">n</div>245 <div class="key">m</div>246 <div class="key wide gray">247 <svg viewBox="0 0 24 24" style="width:48px;height:48px;">248 <path d="M4 6l6 6-6 6h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H4z" fill="#EDEDED"></path>249 </svg>250 </div>251 </div>252 253 <!-- bottom function row -->254 <div class="kb-bottom">255 <div class="kb-bottom-left">256 <div class="circle-key">?123</div>257 <div class="key small">,</div>258 <div class="key small">259 <svg viewBox="0 0 24 24" style="width:38px;height:38px;">260 <circle cx="12" cy="12" r="9" fill="none" stroke="#EDEDED" stroke-width="2"></circle>261 <path d="M8 12c1.4 1.1 6.6 1.1 8 0" stroke="#EDEDED" stroke-width="1.6" fill="none" stroke-linecap="round"></path>262 <circle cx="9" cy="10" r="1.2" fill="#EDEDED"></circle>263 <circle cx="15" cy="10" r="1.2" fill="#EDEDED"></circle>264 </svg>265 </div>266 <div class="key space"></div>267 <div class="key small period">.</div>268 <div class="key small gray">269 <svg viewBox="0 0 24 24" style="width:44px;height:44px;">270 <path d="M4 6l6 6-6 6h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H4z" fill="#EDEDED"></path>271 </svg>272 </div>273 </div>274 <div class="kb-bottom-right">275 <div class="circle-key right">276 <svg viewBox="0 0 24 24" style="width:36px;height:36px;">277 <circle cx="10" cy="10" r="7" stroke="#121212" stroke-width="2" fill="none"></circle>278 <line x1="15" y1="15" x2="21" y2="21" stroke="#121212" stroke-width="2" stroke-linecap="round"></line>279 </svg>280 </div>281 </div>282 </div>283 </div>284 </div>285 286 <div class="gesture"></div>287</div>288</body>289</html>