GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Search Suggestions UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Roboto, Arial, sans-serif;15 color: #1a1a1a;16 }17 18 /* Top gradient area */19 .top-gradient {20 position: absolute;21 left: 0; top: 0;22 width: 100%; height: 340px;23 background: linear-gradient(180deg, #8fded6 0%, #a8eadb 100%);24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 24px; left: 24px; right: 24px;30 display: flex;31 justify-content: space-between;32 align-items: center;33 color: #0e0e0e;34 font-size: 38px;35 font-weight: 600;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-dot {43 width: 36px; height: 36px;44 border-radius: 50%;45 background: #b7d6d0;46 display: inline-block;47 }48 .icon {49 width: 44px; height: 44px;50 }51 52 /* Back button */53 .back-btn {54 position: absolute;55 top: 98px; left: 26px;56 width: 72px; height: 72px;57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .back-btn svg { width: 52px; height: 52px; }62 63 /* Search bar */64 .search-bar {65 position: absolute;66 top: 120px; left: 90px;67 width: 900px; height: 106px;68 background: #ffffff;69 border-radius: 26px;70 box-shadow: 0 4px 10px rgba(0,0,0,0.08);71 border: 1px solid rgba(0,0,0,0.08);72 display: flex;73 align-items: center;74 padding: 0 24px;75 gap: 20px;76 }77 .search-input {78 font-size: 44px;79 color: #1a1a1a;80 letter-spacing: 0.2px;81 flex: 1;82 }83 .search-icon, .close-icon { width: 52px; height: 52px; }84 85 /* Suggestions list */86 .suggestions {87 position: absolute;88 top: 360px;89 left: 0; right: 0;90 padding-left: 40px;91 padding-right: 24px;92 }93 .suggestion-item {94 display: flex;95 align-items: center;96 height: 118px;97 border-bottom: 1px solid #e6e6e6;98 gap: 26px;99 }100 .suggestion-text {101 font-size: 40px;102 color: #222;103 flex: 1;104 }105 .suggestion-text b { font-weight: 700; }106 .right-arrow {107 width: 40px; height: 40px;108 }109 .magnifier {110 width: 48px; height: 48px;111 }112 113 /* Keyboard mock */114 .keyboard {115 position: absolute;116 left: 0; right: 0; bottom: 0;117 height: 760px;118 background: #2a221d;119 color: #e8d6c8;120 padding: 24px 24px 100px;121 box-sizing: border-box;122 }123 .kb-suggest {124 display: flex; align-items: center;125 gap: 18px;126 margin-bottom: 24px;127 }128 .chip {129 padding: 12px 20px;130 background: #3a2f29;131 border-radius: 18px;132 font-size: 34px;133 color: #f1dfd1;134 }135 .kb-mic {136 margin-left: auto;137 width: 44px; height: 44px;138 }139 .kb-row {140 display: flex;141 justify-content: center;142 gap: 14px;143 margin: 18px 0;144 }145 .key {146 width: 86px; height: 100px;147 background: #3a2f29;148 border-radius: 18px;149 display: flex; align-items: center; justify-content: center;150 font-size: 40px;151 color: #f1dfd1;152 }153 .key.wide { width: 140px; }154 .key.circle {155 width: 120px; height: 120px; border-radius: 60px; background: #eec8a8; color: #3a2f29; font-weight: 700;156 }157 .key.small { width: 100px; }158 .kb-bottom {159 display: flex; align-items: center; justify-content: space-between;160 margin-top: 16px;161 padding: 0 40px;162 }163 .gesture {164 position: absolute; bottom: 20px; left: 50%;165 transform: translateX(-50%);166 width: 220px; height: 8px; border-radius: 4px; background: #e5e5e5;167 }168</style>169</head>170<body>171<div id="render-target">172 <div class="top-gradient"></div>173 174 <div class="status-bar">175 <div style="display:flex; align-items:center; gap:14px;">176 <span>9:39</span>177 <span class="status-dot"></span>178 </div>179 <div class="status-icons">180 <!-- WiFi -->181 <svg class="icon" viewBox="0 0 24 24">182 <path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" fill="#1a1a1a"/>183 <path d="M2.5 9.5c5.7-5.3 13.3-5.3 19 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>184 <path d="M5.5 12.5c4-3.8 9-3.8 13 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>185 <path d="M8.5 15.5c2.2-2 4.8-2 7 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>186 </svg>187 <!-- Battery -->188 <svg class="icon" viewBox="0 0 28 24">189 <rect x="2" y="5" width="20" height="14" rx="3" ry="3" stroke="#1a1a1a" stroke-width="2" fill="none"/>190 <rect x="5" y="8" width="14" height="8" rx="2" fill="#1a1a1a"/>191 <rect x="22" y="9" width="4" height="6" rx="1" fill="#1a1a1a"/>192 </svg>193 </div>194 </div>195 196 <div class="back-btn">197 <svg viewBox="0 0 24 24">198 <path d="M15 5l-7 7 7 7" stroke="#1a1a1a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199 </svg>200 </div>201 202 <div class="search-bar">203 <!-- Magnifier -->204 <svg class="search-icon" viewBox="0 0 24 24">205 <circle cx="11" cy="11" r="7" stroke="#1a1a1a" stroke-width="2" fill="none"/>206 <path d="M20 20l-4.5-4.5" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round"/>207 </svg>208 <div class="search-input">iPhone</div>209 <!-- Close X -->210 <svg class="close-icon" viewBox="0 0 24 24">211 <path d="M5 5l14 14M19 5L5 19" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round"/>212 </svg>213 </div>214 215 <div class="suggestions">216 <!-- 1 -->217 <div class="suggestion-item">218 <svg class="magnifier" viewBox="0 0 24 24">219 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>220 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>221 </svg>222 <div class="suggestion-text">iphone</div>223 <svg class="right-arrow" viewBox="0 0 24 24">224 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <!-- 2 -->228 <div class="suggestion-item">229 <svg class="magnifier" viewBox="0 0 24 24">230 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>231 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>232 </svg>233 <div class="suggestion-text">iphone <b>15</b></div>234 <svg class="right-arrow" viewBox="0 0 24 24">235 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 </div>238 <!-- 3 -->239 <div class="suggestion-item">240 <svg class="magnifier" viewBox="0 0 24 24">241 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>242 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>243 </svg>244 <div class="suggestion-text">iphone <b>13</b></div>245 <svg class="right-arrow" viewBox="0 0 24 24">246 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 <!-- 4 -->250 <div class="suggestion-item">251 <svg class="magnifier" viewBox="0 0 24 24">252 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>253 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>254 </svg>255 <div class="suggestion-text">iphone <b>14</b></div>256 <svg class="right-arrow" viewBox="0 0 24 24">257 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </div>260 <!-- 5 -->261 <div class="suggestion-item">262 <svg class="magnifier" viewBox="0 0 24 24">263 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>264 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>265 </svg>266 <div class="suggestion-text">iphone <b>15</b> pro max</div>267 <svg class="right-arrow" viewBox="0 0 24 24">268 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 </div>271 <!-- 6 -->272 <div class="suggestion-item">273 <svg class="magnifier" viewBox="0 0 24 24">274 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>275 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>276 </svg>277 <div class="suggestion-text">iphone <b>13</b> back cover</div>278 <svg class="right-arrow" viewBox="0 0 24 24">279 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <!-- 7 -->283 <div class="suggestion-item">284 <svg class="magnifier" viewBox="0 0 24 24">285 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>286 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>287 </svg>288 <div class="suggestion-text">iphone <b>14</b> back cover</div>289 <svg class="right-arrow" viewBox="0 0 24 24">290 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 <!-- 8 -->294 <div class="suggestion-item">295 <svg class="magnifier" viewBox="0 0 24 24">296 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>297 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>298 </svg>299 <div class="suggestion-text">iphone <b>15</b> pro max case</div>300 <svg class="right-arrow" viewBox="0 0 24 24">301 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302 </svg>303 </div>304 <!-- 9 -->305 <div class="suggestion-item">306 <svg class="magnifier" viewBox="0 0 24 24">307 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>308 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>309 </svg>310 <div class="suggestion-text">iphone <b>15</b> cover</div>311 <svg class="right-arrow" viewBox="0 0 24 24">312 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </div>315 <!-- 10 -->316 <div class="suggestion-item">317 <svg class="magnifier" viewBox="0 0 24 24">318 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>319 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>320 </svg>321 <div class="suggestion-text">iphone <b>15</b> pro case</div>322 <svg class="right-arrow" viewBox="0 0 24 24">323 <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 </div>326 </div>327 328 <!-- Keyboard mock -->329 <div class="keyboard">330 <div class="kb-suggest">331 <div class="chip">iPhone</div>332 <div class="chip">iphone</div>333 <div class="chip">iphones</div>334 <svg class="kb-mic" viewBox="0 0 24 24">335 <rect x="8" y="4" width="8" height="10" rx="4" fill="#e8d6c8"/>336 <path d="M6 11c0 3.3 2.4 5.5 6 5.5s6-2.2 6-5.5" stroke="#e8d6c8" stroke-width="2" fill="none" stroke-linecap="round"/>337 <path d="M12 18v3" stroke="#e8d6c8" stroke-width="2" stroke-linecap="round"/>338 </svg>339 </div>340 341 <div class="kb-row">342 <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>343 </div>344 <div class="kb-row">345 <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>346 </div>347 <div class="kb-row">348 <div class="key wide">⇧</div>349 <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>350 <div class="key wide">⌫</div>351 </div>352 <div class="kb-bottom">353 <div class="key circle">?123</div>354 <div class="key small">,</div>355 <div class="key small">☺</div>356 <div class="key small">.</div>357 <div class="key circle">➜</div>358 </div>359 </div>360 361 <div class="gesture"></div>362</div>363</body>364</html>