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 with Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 26px 34px 0 34px;21 color: #424242;22 font-weight: 500;23 display: flex;24 align-items: center;25 justify-content: space-between;26 box-sizing: border-box;27 }28 .status-time { font-size: 40px; letter-spacing: 0.5px; }29 .status-icons { display: flex; gap: 26px; align-items: center; }30 .icon-small { width: 34px; height: 34px; }31 32 /* Search */33 .search-wrap { padding: 14px 28px; }34 .search-bar {35 height: 112px;36 background: #F3F4F6;37 border-radius: 56px;38 display: flex;39 align-items: center;40 padding: 0 22px;41 gap: 18px;42 box-sizing: border-box;43 }44 .pill-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }45 .query {46 flex: 1;47 font-size: 42px;48 color: #1f1f1f;49 white-space: nowrap;50 overflow: hidden;51 text-overflow: ellipsis;52 }53 .caret { color: #1a73e8; }54 .search-actions { display: flex; gap: 10px; align-items: center; }55 56 /* Suggestions */57 .suggestions { padding: 8px 34px 0 34px; }58 .s-row {59 display: flex;60 align-items: center;61 justify-content: space-between;62 padding: 28px 6px;63 border-radius: 14px;64 }65 .s-text {66 color: #616161;67 font-size: 46px;68 line-height: 1.25;69 }70 .s-text strong { color: #212121; font-weight: 700; }71 .s-sub {72 display: block;73 color: #9E9E9E;74 font-size: 32px;75 margin-top: 6px;76 }77 .s-arrow { width: 44px; height: 44px; opacity: 0.6; }78 79 /* Keyboard */80 .keyboard {81 position: absolute;82 left: 0; right: 0; bottom: 0;83 height: 900px;84 background: #EEF0FE;85 border-top-left-radius: 24px;86 border-top-right-radius: 24px;87 box-shadow: 0 -2px 0 rgba(0,0,0,0.02) inset;88 box-sizing: border-box;89 }90 .kb-toolbar {91 height: 112px;92 padding: 18px 26px;93 display: flex;94 align-items: center;95 gap: 38px;96 }97 .toolbar-chip {98 width: 82px; height: 82px; border-radius: 24px;99 background: #D8E9B8;100 display: flex; align-items: center; justify-content: center;101 }102 .toolbar-icon { width: 58px; height: 58px; opacity: 0.9; }103 .kb-area { padding: 10px 28px 0 28px; }104 .kb-row {105 display: flex;106 justify-content: center;107 gap: 14px;108 margin: 18px 0;109 }110 .key {111 width: 88px; height: 110px;112 background: #FFFFFF;113 border-radius: 24px;114 display: flex; align-items: center; justify-content: center;115 color: #424242;116 font-size: 44px;117 box-shadow: 0 1px 0 #E0E0E0 inset, 0 1px 2px rgba(0,0,0,0.05);118 }119 .key.wide { width: 126px; }120 .key.shift, .key.delete { background: #FFD7E8; }121 .key.action { background: #D8E9B8; }122 .key.space { flex: 1; min-width: 360px; }123 .kb-row.indent { padding-left: 56px; padding-right: 56px; }124 125 /* Gesture bar */126 .gesture {127 position: absolute; left: 50%; transform: translateX(-50%);128 bottom: 20px;129 width: 300px; height: 10px; border-radius: 6px; background: #BDBDBD;130 opacity: 0.8;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status Bar -->138 <div class="status-bar">139 <div class="status-time">5:15</div>140 <div class="status-icons">141 <!-- Signal -->142 <svg class="icon-small" viewBox="0 0 24 24">143 <path d="M3 21h3v-6H3v6zm5 0h3V9H8v12zm5 0h3V5h-3v16zm5 0h3V1h-3v20z" fill="#616161"/>144 </svg>145 <!-- Battery -->146 <svg class="icon-small" viewBox="0 0 26 24">147 <rect x="1" y="6" width="20" height="12" rx="2" fill="#616161"></rect>148 <rect x="3" y="8" width="16" height="8" rx="1" fill="#FFFFFF"></rect>149 <rect x="3" y="8" width="12" height="8" rx="1" fill="#8BC34A"></rect>150 <rect x="22" y="9" width="3" height="6" rx="1" fill="#616161"></rect>151 </svg>152 </div>153 </div>154 155 <!-- Search bar -->156 <div class="search-wrap">157 <div class="search-bar">158 <div class="pill-icon">159 <svg width="44" height="44" viewBox="0 0 24 24">160 <path d="M15 18l-6-6 6-6" stroke="#424242" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>161 </svg>162 </div>163 <div class="query">hiking boots for women size 9<span class="caret">|</span></div>164 <div class="search-actions">165 <svg width="44" height="44" viewBox="0 0 24 24">166 <path d="M6 6l12 12M18 6L6 18" stroke="#5F6368" stroke-width="2.2" stroke-linecap="round"/>167 </svg>168 <svg width="52" height="52" viewBox="0 0 24 24">169 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#5F6368" stroke-width="2" fill="none"/>170 <circle cx="12" cy="12" r="3" stroke="#5F6368" stroke-width="2" fill="none"/>171 <rect x="8" y="4" width="8" height="2" rx="1" fill="#5F6368"/>172 </svg>173 </div>174 </div>175 </div>176 177 <!-- Suggestions -->178 <div class="suggestions">179 <div class="s-row">180 <div class="s-text">181 hiking boots women size <strong>9</strong>182 <span class="s-sub">Women's Shoes</span>183 </div>184 <svg class="s-arrow" viewBox="0 0 24 24">185 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186 </svg>187 </div>188 189 <div class="s-row">190 <div class="s-text">oboz women's hiking boots size <strong>9</strong></div>191 <svg class="s-arrow" viewBox="0 0 24 24">192 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 196 <div class="s-row">197 <div class="s-text">hoka hiking boots women size <strong>9</strong></div>198 <svg class="s-arrow" viewBox="0 0 24 24">199 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 203 <div class="s-row">204 <div class="s-text">hiking boots for women size <strong>9.5</strong></div>205 <svg class="s-arrow" viewBox="0 0 24 24">206 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 210 <div class="s-row">211 <div class="s-text">hiking boots for women size <strong>9</strong> <span style="font-weight:700;">new</span></div>212 <svg class="s-arrow" viewBox="0 0 24 24">213 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214 </svg>215 </div>216 217 <div class="s-row">218 <div class="s-text">hiking boots for women size <strong>9</strong> men</div>219 <svg class="s-arrow" viewBox="0 0 24 24">220 <path d="M6 18L18 6M8 6h10v10" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 </div>224 225 <!-- Keyboard -->226 <div class="keyboard">227 <div class="kb-toolbar">228 <div class="toolbar-chip">229 <svg class="toolbar-icon" viewBox="0 0 24 24">230 <path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z" fill="#5A6F2C"/>231 </svg>232 </div>233 <svg class="toolbar-icon" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="9" fill="#5F6368"/>235 <circle cx="9" cy="10" r="1.5" fill="#fff"/>236 <rect x="7" y="14" width="10" height="2" rx="1" fill="#fff"/>237 </svg>238 <svg class="toolbar-icon" viewBox="0 0 24 24">239 <text x="3" y="16" font-size="10" fill="#5F6368">GIF</text>240 </svg>241 <svg class="toolbar-icon" viewBox="0 0 24 24">242 <circle cx="12" cy="12" r="9" stroke="#5F6368" stroke-width="2" fill="none"/>243 <rect x="10" y="6" width="4" height="12" rx="2" fill="#5F6368"/>244 </svg>245 <svg class="toolbar-icon" viewBox="0 0 24 24">246 <path d="M3 5h8v6H3zM13 5h8v14h-8zM3 13h8v6H3z" fill="#5F6368"/>247 </svg>248 <svg class="toolbar-icon" viewBox="0 0 24 24">249 <circle cx="12" cy="12" r="9" fill="#5F6368"/>250 <circle cx="12" cy="9" r="3" fill="#fff"/>251 <rect x="11" y="12" width="2" height="5" rx="1" fill="#fff"/>252 </svg>253 </div>254 255 <div class="kb-area">256 <div class="kb-row">257 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>258 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>259 <div class="key">o</div><div class="key">p</div>260 </div>261 262 <div class="kb-row indent">263 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>264 <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>265 </div>266 267 <div class="kb-row">268 <div class="key shift">⇧</div>269 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>270 <div class="key">b</div><div class="key">n</div><div class="key">m</div>271 <div class="key delete">⌫</div>272 </div>273 274 <div class="kb-row">275 <div class="key wide" style="background:#E5C6DA;">?123</div>276 <div class="key wide" style="background:#F7E4F2;">,</div>277 <div class="key wide" style="background:#F7E4F2;">☺</div>278 <div class="key space"></div>279 <div class="key wide" style="background:#F7E4F2;">.</div>280 <div class="key action" style="border-radius: 40px; width: 120px; height: 120px;">281 <svg width="54" height="54" viewBox="0 0 24 24">282 <circle cx="11" cy="11" r="7" stroke="#4A5E26" stroke-width="2" fill="none"/>283 <path d="M21 21l-4.5-4.5" stroke="#4A5E26" stroke-width="2" stroke-linecap="round"/>284 </svg>285 </div>286 </div>287 </div>288 </div>289 290 <div class="gesture"></div>291</div>292</body>293</html>