GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Suggestions UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F7F7F1;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #C2C966; /* olive/green */24 color: #1f1f1f;25 display: flex;26 align-items: center;27 padding: 0 30px;28 font-size: 40px;29 letter-spacing: 0.5px;30 }31 .status-left { flex: 1; }32 .status-center { flex: 1; text-align: center; opacity: 0.85; }33 .status-right { flex: 1; display: flex; justify-content: flex-end; gap: 24px; align-items: center; }34 .status-icon svg { opacity: 0.9; }35 36 /* App header and search area */37 .app-header {38 position: absolute;39 top: 120px;40 left: 0;41 width: 1080px;42 background: #F3F2EA;43 padding: 26px 30px 36px 30px;44 box-sizing: border-box;45 border-bottom: 1px solid #E6E6DE;46 }47 .back-row {48 display: flex;49 align-items: center;50 gap: 18px;51 margin-bottom: 22px;52 }53 .back-icon {54 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;55 }56 .search-bar {57 width: 1020px;58 height: 104px;59 margin: 8px auto 0 auto;60 background: #FFFFFF;61 border: 2px solid #CFCFC6;62 border-radius: 30px;63 box-sizing: border-box;64 display: flex;65 align-items: center;66 padding: 0 26px;67 gap: 24px;68 }69 .search-icon {70 width: 52px; height: 52px; border-radius: 26px;71 display: flex; align-items: center; justify-content: center;72 color: #7A7A53;73 }74 .search-input-text {75 flex: 1;76 font-size: 42px;77 color: #2A2A2A;78 letter-spacing: 0.2px;79 }80 .clear-btn {81 width: 60px; height: 60px; border-radius: 30px;82 display: flex; align-items: center; justify-content: center;83 background: #F3F3F0;84 border: 1px solid #D6D6CE;85 }86 87 /* Suggestions list */88 .suggestions-wrap {89 position: absolute;90 top: 320px;91 left: 0;92 width: 1080px;93 padding: 20px 30px 0 30px;94 box-sizing: border-box;95 }96 .suggestions-title {97 font-size: 38px;98 color: #6E6E63;99 margin: 24px 0 6px 8px;100 }101 .divider {102 height: 1px;103 background: #E6E6DE;104 margin: 18px 0;105 }106 .suggestion-item {107 display: flex;108 align-items: center;109 gap: 26px;110 padding: 22px 8px;111 font-size: 40px;112 color: #2A2A2A;113 }114 .suggestion-item + .divider { margin-top: 0; }115 .s-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #8B8B64; }116 117 /* Keyboard placeholder */118 .keyboard {119 position: absolute;120 bottom: 0;121 left: 0;122 width: 1080px;123 height: 880px;124 background: #111315;125 color: #D5D5D5;126 border-top: 1px solid #2A2A2A;127 }128 .kb-suggestion-row {129 height: 112px;130 display: flex;131 align-items: center;132 padding: 0 26px;133 gap: 20px;134 border-bottom: 1px solid #1E1F21;135 background: #16181A;136 font-size: 40px;137 }138 .kb-chip {139 padding: 10px 20px;140 border-radius: 22px;141 background: #222428;142 border: 1px solid #2C2E33;143 }144 .kb-keys {145 position: absolute;146 bottom: 0;147 left: 0;148 width: 1080px;149 height: 768px;150 padding: 26px 24px 40px 24px;151 box-sizing: border-box;152 display: grid;153 grid-template-rows: repeat(4, 1fr);154 gap: 18px;155 }156 .kb-row {157 display: grid;158 grid-template-columns: repeat(10, 1fr);159 gap: 12px;160 }161 .key {162 background: #1C1E22;163 border: 1px solid #2A2C31;164 border-radius: 14px;165 }166 .key.large { grid-column: span 2; }167 .key.space { grid-column: span 6; }168 .key-enter { grid-column: span 2; }169 170 /* Small utility icons as inline SVG look */171 .svg-olive { stroke: #7A7A53; }172 .svg-dark { stroke: #3A3A3A; }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status Bar -->179 <div class="status-bar">180 <div class="status-left">12:20</div>181 <div class="status-center">• • •</div>182 <div class="status-right">183 <div class="status-icon">184 <svg width="32" height="32" viewBox="0 0 24 24">185 <path d="M3 11h6v10H3zM11 7h6v14h-6zM19 3h2v18h-2z" fill="#2b2b2b"></path>186 </svg>187 </div>188 <div class="status-icon">189 <svg width="32" height="32" viewBox="0 0 24 24">190 <path d="M3 10a9 9 0 0 1 18 0h-2a7 7 0 0 0-14 0H3zm0 4h18v2H3z" fill="#2b2b2b"></path>191 </svg>192 </div>193 <div class="status-icon">194 <svg width="32" height="32" viewBox="0 0 24 24">195 <path d="M2 10l10-7 10 7v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10z" fill="#2b2b2b"></path>196 </svg>197 </div>198 <div class="status-icon">199 <svg width="32" height="32" viewBox="0 0 24 24">200 <path d="M21 16V8a1 1 0 0 0-1-1h-2l-3-3H9L6 7H4a1 1 0 0 0-1 1v8h18z" fill="#2b2b2b"></path>201 </svg>202 </div>203 </div>204 </div>205 206 <!-- App Header -->207 <div class="app-header">208 <div class="back-row">209 <div class="back-icon">210 <svg width="52" height="52" viewBox="0 0 24 24">211 <path d="M15 18l-6-6 6-6" stroke="#3A3A3A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>212 </svg>213 </div>214 </div>215 <div class="search-bar">216 <div class="search-icon">217 <svg width="32" height="32" viewBox="0 0 24 24">218 <circle cx="11" cy="11" r="7" stroke="#7A7A53" stroke-width="2" fill="none"></circle>219 <line x1="16" y1="16" x2="21" y2="21" stroke="#7A7A53" stroke-width="2" stroke-linecap="round"></line>220 </svg>221 </div>222 <div class="search-input-text">Fresh Red Rose Flowers</div>223 <div class="clear-btn">224 <svg width="30" height="30" viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="10" fill="none" stroke="#B8B8B0" stroke-width="1.5"></circle>226 <path d="M8 8l8 8M8 16l8-8" stroke="#7E7E78" stroke-width="2" stroke-linecap="round"></path>227 </svg>228 </div>229 </div>230 </div>231 232 <!-- Suggestions -->233 <div class="suggestions-wrap">234 <div class="suggestions-title">Suggestions</div>235 <div class="divider"></div>236 237 <div class="suggestion-item">238 <div class="s-icon">239 <svg width="32" height="32" viewBox="0 0 24 24">240 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>241 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>242 </svg>243 </div>244 <div>Exquisite Flowers & Chocolates</div>245 </div>246 <div class="divider"></div>247 248 <div class="suggestion-item">249 <div class="s-icon">250 <svg width="32" height="32" viewBox="0 0 24 24">251 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>252 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>253 </svg>254 </div>255 <div>Flower Bouquet & Cakes</div>256 </div>257 <div class="divider"></div>258 259 <div class="suggestion-item">260 <div class="s-icon">261 <svg width="32" height="32" viewBox="0 0 24 24">262 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>263 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>264 </svg>265 </div>266 <div>Mixed Flowers</div>267 </div>268 <div class="divider"></div>269 270 <div class="suggestion-item">271 <div class="s-icon">272 <svg width="32" height="32" viewBox="0 0 24 24">273 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>274 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>275 </svg>276 </div>277 <div>roses</div>278 </div>279 <div class="divider"></div>280 281 <div class="suggestion-item">282 <div class="s-icon">283 <svg width="32" height="32" viewBox="0 0 24 24">284 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>285 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>286 </svg>287 </div>288 <div>Luscious Red Velvet Cakes</div>289 </div>290 <div class="divider"></div>291 292 <div class="suggestion-item">293 <div class="s-icon">294 <svg width="32" height="32" viewBox="0 0 24 24">295 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>296 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>297 </svg>298 </div>299 <div>Forever Roses Online</div>300 </div>301 <div class="divider"></div>302 303 <div class="suggestion-item">304 <div class="s-icon">305 <svg width="32" height="32" viewBox="0 0 24 24">306 <circle cx="11" cy="11" r="7" stroke="#8B8B64" stroke-width="2" fill="none"></circle>307 <line x1="16" y1="16" x2="21" y2="21" stroke="#8B8B64" stroke-width="2" stroke-linecap="round"></line>308 </svg>309 </div>310 <div>Mixed Roses Online</div>311 </div>312 <div class="divider"></div>313 </div>314 315 <!-- Keyboard (dark theme placeholder to match screenshot look) -->316 <div class="keyboard">317 <div class="kb-suggestion-row">318 <div class="kb-chip">Flowers</div>319 <div class="kb-chip">🌸</div>320 <div class="kb-chip">🌹</div>321 <div style="margin-left:auto" class="kb-chip">🎤</div>322 </div>323 <div class="kb-keys">324 <div class="kb-row">325 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>326 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>327 </div>328 <div class="kb-row">329 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>330 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>331 </div>332 <div class="kb-row">333 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>334 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>335 </div>336 <div class="kb-row">337 <div class="key large"></div>338 <div class="key"></div>339 <div class="key space"></div>340 <div class="key"></div>341 <div class="key-enter"></div>342 </div>343 </div>344 </div>345 346</div>347</body>348</html>