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: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 32px;15 }16 17 /* Top app bar */18 .topbar {19 position: absolute;20 left: 0;21 top: 0;22 width: 1080px;23 height: 260px;24 background: #c9435f; /* deep pink/red */25 }26 27 /* Status bar */28 .status-bar {29 position: absolute;30 top: 20px;31 left: 36px;32 right: 36px;33 height: 60px;34 color: #fff;35 font-size: 34px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 opacity: 0.95;40 }41 .status-icons { display: flex; align-items: center; gap: 24px; }42 43 /* Back button */44 .back-btn {45 position: absolute;46 top: 110px;47 left: 24px;48 width: 90px;49 height: 90px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 55 /* Search field pill */56 .search-pill {57 position: absolute;58 top: 110px;59 left: 120px;60 width: 930px;61 height: 90px;62 background: #ffffff;63 border-radius: 20px;64 box-shadow: 0 2px 0 rgba(0,0,0,0.08);65 display: flex;66 align-items: center;67 padding: 0 26px;68 gap: 18px;69 }70 .search-text {71 flex: 1;72 color: #222;73 font-size: 36px;74 line-height: 90px;75 }76 .circle-icon {77 width: 54px;78 height: 54px;79 border-radius: 27px;80 background: #e9e9e9;81 display: flex;82 align-items: center;83 justify-content: center;84 }85 86 /* Suggestions section */87 .content {88 position: absolute;89 top: 280px;90 left: 0;91 right: 0;92 padding: 0 40px;93 }94 .title {95 font-size: 52px;96 font-weight: 600;97 color: #111;98 margin: 28px 0 24px;99 }100 .suggestion {101 height: 110px;102 display: flex;103 align-items: center;104 justify-content: space-between;105 border-bottom: 1px solid #e6e6e6;106 color: #111;107 font-size: 44px;108 }109 .suggestion.dim { color: #8d8d8d; }110 .suggestion.bold { font-weight: 700; color: #000; }111 .suggestion .right {112 width: 48px;113 height: 48px;114 display: flex;115 align-items: center;116 justify-content: center;117 }118 .see-all {119 height: 110px;120 display: flex;121 align-items: center;122 border-bottom: 1px solid #e6e6e6;123 font-size: 42px;124 color: #111;125 }126 .see-all .accent { color: #c9435f; font-weight: 600; }127 128 /* Keyboard placeholder */129 .keyboard {130 position: absolute;131 left: 0;132 bottom: 0;133 width: 1080px;134 height: 840px;135 background: #1f1f1f;136 border-top-left-radius: 26px;137 border-top-right-radius: 26px;138 color: #d0d0d0;139 }140 .keyboard .label {141 position: absolute;142 left: 40px;143 top: 30px;144 font-size: 32px;145 opacity: 0.7;146 }147 /* subtle key rows to hint at keyboard */148 .key-row {149 position: absolute;150 left: 40px;151 right: 40px;152 height: 110px;153 display: flex;154 gap: 16px;155 }156 .key {157 flex: 1;158 background: #2a2a2a;159 border-radius: 18px;160 }161 .row1 { top: 130px; }162 .row2 { top: 260px; }163 .row3 { top: 390px; }164 .row4 { top: 520px; }165 .row5 { top: 650px; }166</style>167</head>168<body>169<div id="render-target">170 171 <div class="topbar">172 <div class="status-bar">173 <div>9:19</div>174 <div class="status-icons">175 <!-- WiFi icon -->176 <svg width="42" height="42" viewBox="0 0 42 42">177 <path d="M6 16c7-6 23-6 30 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>178 <path d="M11 21c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>179 <path d="M16 26c3-2 7-2 10 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>180 <circle cx="21" cy="31" r="2.4" fill="#fff"/>181 </svg>182 <!-- Battery icon -->183 <svg width="46" height="42" viewBox="0 0 46 42">184 <rect x="4" y="10" width="34" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"/>185 <rect x="38" y="16" width="4" height="10" rx="1" fill="#fff"/>186 <rect x="8" y="14" width="18" height="14" rx="2" fill="#fff"/>187 </svg>188 </div>189 </div>190 191 <!-- Back button -->192 <div class="back-btn">193 <svg width="60" height="60" viewBox="0 0 60 60">194 <path d="M36 12 L18 30 L36 48" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 198 <!-- Search pill -->199 <div class="search-pill">200 <div class="search-text">bread buns</div>201 <div class="circle-icon">202 <!-- Clear (X) -->203 <svg width="26" height="26" viewBox="0 0 26 26">204 <path d="M6 6 L20 20 M20 6 L6 20" stroke="#777" stroke-width="3" stroke-linecap="round"/>205 </svg>206 </div>207 <div class="circle-icon" title="Scan barcode">208 <!-- Barcode icon -->209 <svg width="26" height="26" viewBox="0 0 26 26">210 <rect x="4" y="4" width="18" height="18" rx="3" stroke="#777" stroke-width="2" fill="none"/>211 <rect x="7" y="7" width="2" height="12" fill="#777"/>212 <rect x="11" y="7" width="1.6" height="12" fill="#777"/>213 <rect x="14.5" y="7" width="2.6" height="12" fill="#777"/>214 <rect x="19" y="7" width="1.6" height="12" fill="#777"/>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Suggestions -->221 <div class="content">222 <div class="title">Suggestions</div>223 224 <div class="suggestion">225 <div>bread buns</div>226 <div class="right">227 <svg width="34" height="34" viewBox="0 0 34 34">228 <path d="M8 24 L24 8 M24 8 L24 18 M24 8 L14 8" stroke="#9a9a9a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 </svg>230 </div>231 </div>232 233 <div class="suggestion dim">234 <div>bread bun</div>235 <div class="right">236 <svg width="34" height="34" viewBox="0 0 34 34">237 <path d="M8 24 L24 8 M24 8 L24 18 M24 8 L14 8" stroke="#b3b3b3" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 </div>241 242 <div class="suggestion bold">243 <div>bread buns 8</div>244 <div class="right">245 <svg width="34" height="34" viewBox="0 0 34 34">246 <path d="M8 24 L24 8 M24 8 L24 18 M24 8 L14 8" stroke="#9a9a9a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 </div>250 251 <div class="suggestion dim">252 <div>bread bun pandesal</div>253 <div class="right">254 <svg width="34" height="34" viewBox="0 0 34 34">255 <path d="M8 24 L24 8 M24 8 L24 18 M24 8 L14 8" stroke="#b3b3b3" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 </div>259 260 <div class="see-all">261 <span>See all results for </span>262 <span class="accent">bread buns</span>263 </div>264 </div>265 266 <!-- Keyboard placeholder to emulate the on-screen keyboard area -->267 <div class="keyboard">268 <div class="label">Keyboard (system UI placeholder)</div>269 <div class="key-row row1">270 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>271 </div>272 <div class="key-row row2">273 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>274 </div>275 <div class="key-row row3">276 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>277 </div>278 <div class="key-row row4">279 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>280 </div>281 <div class="key-row row5">282 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>283 </div>284 </div>285 286</div>287</body>288</html>