GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Search with Keyboard</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 border-radius: 0;14 }15 16 /* Top gradient header */17 .header {18 position: absolute;19 left: 0;20 top: 0;21 width: 1080px;22 height: 430px;23 background: linear-gradient(180deg, #a9e3d7 0%, #c6eadf 100%);24 }25 26 /* Status bar */27 .status-bar {28 height: 96px;29 padding: 0 28px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #1a1a1a;34 font-weight: 600;35 font-size: 36px;36 opacity: 0.85;37 }38 .status-right {39 display: flex;40 align-items: center;41 gap: 20px;42 }43 .icon-battery {44 width: 48px; height: 24px; border: 2px solid #1a1a1a; border-radius: 6px; position: relative;45 }46 .icon-battery::after {47 content: "";48 position: absolute; right: -8px; top: 6px;49 width: 6px; height: 12px; background: #1a1a1a; border-radius: 2px;50 }51 .icon-battery .level {52 width: 70%; height: 100%; background: #1a1a1a;53 }54 55 /* Back + search bar area */56 .top-row {57 position: absolute;58 top: 120px;59 left: 0; right: 0;60 padding: 0 24px;61 display: flex; align-items: center; gap: 20px;62 }63 .back-btn {64 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;65 }66 .search-bar {67 flex: 1;68 height: 120px;69 background: #ffffff;70 border-radius: 26px;71 box-shadow: 0 6px 10px rgba(0,0,0,0.08);72 display: flex; align-items: center; padding: 0 28px; gap: 22px;73 }74 .search-text {75 font-size: 40px;76 color: #1e1e1e;77 flex: 1;78 }79 .search-clear {80 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;81 color: #8a8a8a;82 }83 84 /* Suggestion row */85 .suggestion {86 position: absolute;87 left: 0; right: 0;88 top: 280px;89 padding: 0 40px;90 height: 110px;91 display: flex; align-items: center; justify-content: space-between;92 }93 .suggest-left {94 display: flex; align-items: center; gap: 22px;95 }96 .suggest-text {97 font-size: 44px;98 color: #212121;99 }100 .suggest-text b { font-weight: 700; }101 .divider {102 position: absolute; left: 40px; right: 40px; bottom: 0;103 height: 2px; background: #e6e6e6;104 }105 106 /* Keyboard area */107 .keyboard {108 position: absolute;109 left: 0; bottom: 0;110 width: 1080px;111 height: 980px;112 background: #f1eef8;113 box-shadow: 0 -6px 12px rgba(0,0,0,0.05);114 }115 .kb-suggestion {116 height: 130px;117 display: flex; align-items: center; justify-content: space-between;118 padding: 0 30px;119 }120 .kb-chip {121 background: #e1f5d7;122 color: #1c1c1c;123 padding: 18px 28px;124 border-radius: 26px;125 font-size: 44px;126 font-weight: 600;127 }128 .kb-lefticon {129 width: 76px; height: 76px; background: #bfe3c4; border-radius: 50%;130 display: flex; align-items: center; justify-content: center;131 color: #2f5f2f; font-weight: 700;132 }133 .kb-mic {134 width: 84px; height: 84px; border-radius: 50%;135 background: #ffffff; display: flex; align-items: center; justify-content: center;136 box-shadow: 0 2px 6px rgba(0,0,0,0.06);137 }138 139 .keys {140 padding-top: 12px;141 }142 .keys-row {143 display: flex;144 gap: 14px;145 padding: 18px 24px;146 }147 .key {148 flex: 1;149 height: 120px;150 background: #ffffff;151 border-radius: 24px;152 box-shadow: 0 2px 1px rgba(0,0,0,0.02);153 display: flex; align-items: center; justify-content: center;154 font-size: 54px; color: #1f1f1f;155 }156 .key.gray {157 background: #e8ddef;158 }159 .key.wide {160 flex: 1.7;161 }162 .keys-row.row2 { padding-left: 70px; padding-right: 70px; }163 .keys-row.row3 { padding-left: 18px; padding-right: 18px; }164 .key.shift, .key.backspace { flex: 1.25; font-size: 42px; color: #444; }165 .space { flex: 4.6; }166 167 /* Gesture bar */168 .gesture {169 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);170 width: 340px; height: 10px; background: #bcbcbc; border-radius: 6px;171 }172 173 /* Simple icon helpers */174 .ico { width: 44px; height: 44px; color: #6b6b6b; }175 .ico-lg { width: 56px; height: 56px; }176</style>177</head>178<body>179<div id="render-target">180 181 <div class="header">182 <div class="status-bar">183 <div>9:02</div>184 <div class="status-right">185 <!-- WiFi -->186 <svg class="ico" viewBox="0 0 24 24">187 <path fill="#1a1a1a" d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6-6 1.4 1.4A8 8 0 0 1 12 14c2.1 0 4 .8 5.6 2.4L19 14a10 10 0 0 0-14 0zm-3-3 1.4 1.4A12 12 0 0 1 12 9c3.3 0 6.3 1.3 8.6 3.6L22 11a14 14 0 0 0-20 0z"/>188 </svg>189 <!-- Battery -->190 <div class="icon-battery"><div class="level"></div></div>191 </div>192 </div>193 194 <div class="top-row">195 <div class="back-btn">196 <svg class="ico-lg" viewBox="0 0 24 24">197 <path fill="#1f1f1f" d="M15.5 4 7 12l8.5 8 1.5-1.6L10.2 12 17 5.6z"/>198 </svg>199 </div>200 201 <div class="search-bar">202 <svg class="ico" viewBox="0 0 24 24">203 <path fill="#6b6b6b" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6.5zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/>204 </svg>205 <div class="search-text">1 Kg Oatmeal</div>206 <div class="search-clear">207 <svg class="ico" viewBox="0 0 24 24">208 <path fill="#8a8a8a" d="M18 6 6 18l-2-2L16 4l2 2zm0 12L6 6l2-2 12 12-2 2z"/>209 </svg>210 </div>211 </div>212 </div>213 214 <div class="suggestion">215 <div class="suggest-left">216 <svg class="ico" viewBox="0 0 24 24">217 <path fill="#6b6b6b" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6.5zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/>218 </svg>219 <div class="suggest-text"><b>yoga bar</b> oatmeal 1 kg</div>220 </div>221 <svg class="ico" viewBox="0 0 24 24">222 <path fill="#6b6b6b" d="M8 5v14l9-7-9-7z"/>223 </svg>224 <div class="divider"></div>225 </div>226 </div>227 228 <!-- Keyboard -->229 <div class="keyboard">230 <div class="kb-suggestion">231 <div class="kb-lefticon">▦</div>232 <div class="kb-chip">Oatmeal</div>233 <div class="kb-mic">234 <svg class="ico" viewBox="0 0 24 24">235 <path fill="#444" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V20H9v2h6v-2h-2v-2.1A7 7 0 0 0 19 11h-2z"/>236 </svg>237 </div>238 </div>239 240 <div class="keys">241 <!-- Row 1 -->242 <div class="keys-row">243 <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>244 <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>245 </div>246 247 <!-- Row 2 -->248 <div class="keys-row row2">249 <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>250 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>251 </div>252 253 <!-- Row 3 -->254 <div class="keys-row row3">255 <div class="key shift">256 <svg class="ico" viewBox="0 0 24 24">257 <path fill="#444" d="M12 3 4 11h5v7h6v-7h5L12 3z"/>258 </svg>259 </div>260 <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>261 <div class="key backspace">262 <svg class="ico" viewBox="0 0 24 24">263 <path fill="#444" d="M21 6H9L3 12l6 6h12V6zm-5.6 9.6L13 13.2l-2.4 2.4-1.2-1.2 2.4-2.4-2.4-2.4 1.2-1.2 2.4 2.4 2.4-2.4 1.2 1.2-2.4 2.4 2.4 2.4-1.2 1.2z"/>264 </svg>265 </div>266 </div>267 268 <!-- Row 4 -->269 <div class="keys-row">270 <div class="key gray wide">?123</div>271 <div class="key gray">,</div>272 <div class="key space"> </div>273 <div class="key gray">.</div>274 <div class="key gray wide">275 <svg class="ico" viewBox="0 0 24 24">276 <path fill="#444" d="M8 5v14l9-7-9-7z"/>277 </svg>278 </div>279 </div>280 </div>281 282 <div class="gesture"></div>283 </div>284 285</div>286</body>287</html>