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 Suggestions + Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #aee6d7 0%, #cfeee6 25%, #ffffff 60%);15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 92px;24 display: flex;25 align-items: center;26 padding: 0 30px;27 color: #1a1a1a;28 font-weight: 600;29 font-size: 34px;30 }31 .sb-left { flex: 0 0 auto; }32 .sb-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }33 .sb-dot { width: 12px; height: 12px; background: #2f2f2f; border-radius: 50%; opacity: 0.7; }34 35 /* Top search header */36 .search-header {37 position: absolute;38 top: 98px;39 left: 0;40 width: 100%;41 padding: 0 24px;42 display: flex;43 align-items: center;44 gap: 18px;45 }46 .back-btn {47 width: 72px;48 height: 72px;49 border-radius: 36px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .searchbar {55 flex: 1;56 height: 110px;57 background: #ffffff;58 border-radius: 28px;59 box-shadow: 0 4px 12px rgba(0,0,0,0.08);60 display: flex;61 align-items: center;62 padding: 0 26px;63 gap: 20px;64 }65 .search-icon { width: 42px; height: 42px; }66 .search-text {67 flex: 1;68 font-size: 38px;69 color: #1c1c1c;70 white-space: nowrap;71 overflow: hidden;72 text-overflow: ellipsis;73 }74 .clear-btn { width: 40px; height: 40px; opacity: 0.6; }75 76 /* Suggestions list */77 .suggestions {78 position: absolute;79 top: 240px;80 left: 0;81 width: 100%;82 background: #ffffff;83 }84 .suggestion-item {85 display: flex;86 align-items: center;87 justify-content: space-between;88 padding: 28px 36px;89 border-bottom: 1px solid #e7e7e7;90 font-size: 36px;91 color: #1a1a1a;92 }93 .suggestion-item .strong { font-weight: 700; }94 .chev {95 width: 40px;96 height: 40px;97 opacity: 0.55;98 }99 100 /* Keyboard */101 .keyboard {102 position: absolute;103 left: 0;104 bottom: 0;105 width: 100%;106 height: 950px;107 background: #171717;108 border-top-left-radius: 26px;109 border-top-right-radius: 26px;110 overflow: hidden;111 box-shadow: 0 -8px 24px rgba(0,0,0,0.35);112 }113 .kb-suggestions {114 height: 110px;115 background: #232323;116 display: flex;117 align-items: center;118 padding: 0 22px;119 gap: 16px;120 color: #eaeaea;121 font-size: 34px;122 }123 .kb-chip {124 padding: 12px 24px;125 background: #2b2b2b;126 border-radius: 22px;127 color: #eee;128 }129 .kb-space { margin-left: auto; display: flex; align-items: center; gap: 16px; }130 .mic { width: 36px; height: 36px; opacity: 0.8; }131 132 .kb-rows { padding: 18px 16px 0; }133 .kb-row { display: flex; gap: 12px; margin-bottom: 20px; }134 .key {135 flex: 1;136 height: 120px;137 background: #272727;138 border-radius: 22px;139 color: #f0f0f0;140 font-size: 44px;141 display: flex;142 align-items: center;143 justify-content: center;144 }145 .key.small { font-size: 36px; }146 .key.wide { flex: 1.4; }147 .key.space { flex: 4.2; }148 .gesture-bar {149 position: absolute;150 bottom: 24px;151 left: 50%;152 transform: translateX(-50%);153 width: 350px;154 height: 10px;155 background: #e8e8e8;156 border-radius: 8px;157 opacity: 0.9;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="statusbar">166 <div class="sb-left">8:30</div>167 <div class="sb-right">168 <div class="sb-dot"></div>169 <!-- Wi-Fi -->170 <svg class="wifi" width="36" height="36" viewBox="0 0 24 24">171 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18a2 2 0 1 0 0.01 0Z" stroke="#2f2f2f" stroke-width="2" fill="none" stroke-linecap="round"/>172 </svg>173 <!-- Battery -->174 <svg class="battery" width="40" height="36" viewBox="0 0 28 16">175 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#2f2f2f" stroke-width="2"/>176 <rect x="3" y="5" width="16" height="6" rx="1" fill="#2f2f2f"/>177 <rect x="24" y="6" width="3" height="4" rx="1" fill="#2f2f2f"/>178 </svg>179 </div>180 </div>181 182 <!-- Search header -->183 <div class="search-header">184 <div class="back-btn">185 <svg width="42" height="42" viewBox="0 0 24 24">186 <path d="M15 6l-6 6 6 6" stroke="#1c1c1c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187 </svg>188 </div>189 <div class="searchbar">190 <svg class="search-icon" viewBox="0 0 24 24">191 <circle cx="11" cy="11" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"/>192 <path d="M16 16l5 5" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>193 </svg>194 <div class="search-text">Skechers Women's shoes</div>195 <svg class="clear-btn" viewBox="0 0 24 24">196 <path d="M6 6l12 12M18 6L6 18" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>197 </svg>198 </div>199 </div>200 201 <!-- Suggestions list -->202 <div class="suggestions">203 <div class="suggestion-item">204 <div>skechers women's shoes</div>205 <svg class="chev" viewBox="0 0 24 24">206 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="suggestion-item">210 <div>women's <span class="strong">sports</span> shoes skechers</div>211 <svg class="chev" viewBox="0 0 24 24">212 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 <div class="suggestion-item">216 <div>skechers women's shoes <span class="strong">white</span></div>217 <svg class="chev" viewBox="0 0 24 24">218 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 <div class="suggestion-item">222 <div>skechers women's <span class="strong">arch fit</span> shoes</div>223 <svg class="chev" viewBox="0 0 24 24">224 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <div class="suggestion-item">228 <div>women's skechers <span class="strong">slip on sneaker</span> shoes</div>229 <svg class="chev" viewBox="0 0 24 24">230 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 <div class="suggestion-item">234 <div>women's skechers <span class="strong">walking</span> shoes</div>235 <svg class="chev" viewBox="0 0 24 24">236 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 </div>239 <div class="suggestion-item">240 <div>skechers <span class="strong">summits</span> women's shoes</div>241 <svg class="chev" viewBox="0 0 24 24">242 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 <div class="suggestion-item">246 <div>women's shoes <span class="strong">sneakers</span> skechers</div>247 <svg class="chev" viewBox="0 0 24 24">248 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 <div class="suggestion-item">252 <div>skechers women's <span class="strong">running</span> shoes</div>253 <svg class="chev" viewBox="0 0 24 24">254 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 <div class="suggestion-item" style="border-bottom: none;">258 <div>skechers <span class="strong">deluxe</span> women's shoes</div>259 <svg class="chev" viewBox="0 0 24 24">260 <path d="M9 6l6 6-6 6" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 </div>264 265 <!-- Keyboard -->266 <div class="keyboard">267 <div class="kb-suggestions">268 <div class="kb-chip">shoes</div>269 <div class="kb-chip">shoestring</div>270 <div class="kb-chip">👟</div>271 <div class="kb-space">272 <svg class="mic" viewBox="0 0 24 24">273 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3Z" fill="#eaeaea"/>274 <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>275 </svg>276 </div>277 </div>278 <div class="kb-rows">279 <div class="kb-row">280 <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><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>281 </div>282 <div class="kb-row">283 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>284 </div>285 <div class="kb-row">286 <div class="key wide small">⇧</div>287 <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>288 <div class="key wide small">289 <svg width="36" height="36" viewBox="0 0 24 24">290 <path d="M3 6l6 6-6 6M9 12h12" stroke="#f0f0f0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 </div>294 <div class="kb-row">295 <div class="key small wide">?123</div>296 <div class="key small">😊</div>297 <div class="key small">,</div>298 <div class="