GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search UI with Keyboard</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 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 70px;20 padding: 10px 24px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 28px;25 color: #2b2b2b;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 18px;31 }32 .dot {33 width: 10px; height: 10px; background: #2b2b2b; border-radius: 50%;34 display: inline-block;35 }36 37 /* Top search area */38 .top-bar {39 display: flex;40 align-items: center;41 gap: 18px;42 padding: 6px 20px 8px 20px;43 }44 .back-btn {45 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;46 }47 .back-btn svg { width: 34px; height: 34px; fill: #333; }48 .search-wrap {49 flex: 1;50 position: relative;51 }52 .search-input {53 width: 100%;54 height: 90px;55 border-radius: 28px;56 border: 1px solid #e2e2e2;57 background: #f6f6f7;58 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);59 padding: 0 120px 0 28px;60 font-size: 32px;61 color: #333;62 outline: none;63 }64 .mic {65 position: absolute;66 right: 22px;67 top: 50%;68 transform: translateY(-50%);69 width: 54px; height: 54px;70 display: flex; align-items: center; justify-content: center;71 }72 .mic svg { width: 44px; height: 44px; fill: #444; }73 .avatars {74 width: 90px; position: relative; height: 70px;75 }76 .avatar {77 width: 54px; height: 54px; border-radius: 50%;78 position: absolute; top: 8px;79 display: flex; align-items: center; justify-content: center;80 font-size: 18px; color: #fff; border: 3px solid #fff;81 }82 .avatar.a1 { left: 0; background: #36d39a; }83 .avatar.a2 { right: 0; background: #9d6cff; }84 85 /* Sections */86 .content {87 padding: 8px 28px 0 28px;88 overflow: hidden;89 }90 .section-title {91 margin-top: 24px;92 font-size: 34px;93 font-weight: 800;94 color: #2b2d3a;95 letter-spacing: 0.5px;96 }97 .section-caption {98 text-transform: uppercase;99 font-size: 28px;100 font-weight: 800;101 color: #3a3d4a;102 margin-top: 10px;103 letter-spacing: 1px;104 }105 106 .photo-actions {107 display: flex; gap: 28px; margin-top: 20px;108 }109 .photo-btn {110 flex: 1;111 height: 130px;112 border: 2px solid #dcdde1;113 border-radius: 20px;114 display: flex;115 align-items: center;116 justify-content: center;117 gap: 20px;118 font-size: 34px;119 font-weight: 700;120 color: #2d2f3a;121 background: #fff;122 }123 .photo-btn .icon {124 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;125 }126 .photo-btn .icon svg { width: 52px; height: 52px; fill: #343a40; }127 128 .row-between {129 display: flex; align-items: center; justify-content: space-between; margin-top: 38px;130 }131 .edit-btn {132 font-size: 30px; color: #e24d6b; font-weight: 800;133 }134 135 .recent-list {136 display: flex; gap: 42px; margin-top: 22px;137 }138 .recent-item {139 width: 210px; text-align: center;140 }141 .circle-img {142 width: 140px; height: 140px;143 margin: 0 auto;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 border-radius: 50%;147 display: flex; align-items: center; justify-content: center;148 color: #757575; font-size: 22px; padding: 10px; text-align: center;149 }150 .recent-label {151 margin-top: 10px; font-size: 30px; line-height: 34px; color: #2d2f3a;152 }153 154 .view-all {155 background: #ff5877;156 color: #fff;157 padding: 20px 30px;158 border-radius: 16px;159 font-size: 32px;160 font-weight: 800;161 }162 163 .thumb-row {164 display: flex; gap: 24px; margin-top: 22px;165 }166 .thumb {167 width: 322px; height: 210px; border-radius: 14px;168 background: #E0E0E0; border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center; color: #6a6a6a; font-size: 26px; text-align: center;170 }171 172 /* Keyboard */173 .keyboard {174 position: absolute; left: 0; bottom: 0; width: 1080px; height: 900px;175 background: #1f2329;176 border-top-left-radius: 18px;177 border-top-right-radius: 18px;178 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);179 padding: 24px 26px;180 color: #e8e8e8;181 }182 .kbd-top {183 display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;184 }185 .kbd-bubble {186 width: 72px; height: 72px; background: #2a2f36; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px;187 }188 189 .keys-row {190 display: flex; gap: 12px; justify-content: center; margin: 14px 0;191 }192 .key {193 background: #2c3138;194 border-radius: 16px;195 height: 110px;196 width: 90px;197 display: flex; align-items: center; justify-content: center;198 font-size: 38px; font-weight: 700; color: #f0f0f0;199 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);200 }201 .key.small { width: 84px; }202 .key.wide { width: 160px; font-size: 28px; }203 .key.xwide { width: 500px; font-size: 30px; color: #cfcfcf; }204 .key.icon { font-size: 30px; }205 206 .bottom-row {207 display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 18px;208 }209 210 /* Helper line under content to mimic cut off due to keyboard */211 .fade-mask {212 position: absolute; left: 0; right: 0; bottom: 900px; height: 16px;213 background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%);214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- STATUS BAR -->221 <div class="status-bar">222 <div>8:49</div>223 <div class="status-icons">224 <span class="dot"></span>225 <span class="dot"></span>226 <span class="dot"></span>227 <span style="width:22px;height:22px;border:2px solid #2b2b2b;border-radius:4px;display:inline-block;"></span>228 </div>229 </div>230 231 <!-- SEARCH TOP BAR -->232 <div class="top-bar">233 <div class="back-btn" title="Back">234 <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.9 1.9L3.2 12l10.4-10.4 1.9 1.9z"/></svg>235 </div>236 <div class="search-wrap">237 <input class="search-input" value="" placeholder="Search for brands & products">238 <div class="mic">239 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>240 </div>241 </div>242 <div class="avatars">243 <div class="avatar a1">🤖</div>244 <div class="avatar a2">◎</div>245 </div>246 </div>247 248 <!-- MAIN CONTENT -->249 <div class="content">250 <div class="section-caption">PHOTO SEARCH</div>251 252 <div class="photo-actions">253 <div class="photo-btn">254 <span class="icon">255 <svg viewBox="0 0 24 24"><path d="M9 3l2 2h6a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7l4-4zm3 5l-3 4-2-2-3 5h16l-5-7-3 4z"/></svg>256 </span>257 Click a photo258 </div>259 <div class="photo-btn">260 <span class="icon">261 <svg viewBox="0 0 24 24"><path d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm7 3l-4 5 2 2 2-3 3 4h3l-6-8z"/></svg>262 </span>263 Select a photo264 </div>265 </div>266 267 <div class="row-between">268 <div class="section-title" style="font-weight:800;font-size:36px;">RECENT SEARCHES</div>269 <div class="edit-btn">EDIT</div>270 </div>271 272 <div class="recent-list">273 <div class="recent-item">274 <div class="circle-img">[IMG: Laptop bag]</div>275 <div class="recent-label">Laptop standin…</div>276 </div>277 <div class="recent-item">278 <div class="circle-img">[IMG: White golf shoes]</div>279 <div class="recent-label">Golf shoes for men</div>280 </div>281 <div class="recent-item">282 <div class="circle-img">[IMG: Golf shoes]</div>283 <div class="recent-label">Golf shoes for men</div>284 </div>285 </div>286 287 <div class="row-between">288 <div class="section-title">MOST SEARCHED ARTICLES</div>289 <div class="view-all">View All</div>290 </div>291 292 <div class="thumb-row">293 <div class="thumb">[IMG: Rugs and mats]</div>294 <div class="thumb">[IMG: Shoes on street]</div>295 <div class="thumb">[IMG: Smartwatch closeup]</div>296 </div>297 </div>298 299 <div class="fade-mask"></div>300 301 <!-- KEYBOARD -->302 <div class="keyboard">303 <div class="kbd-top">304 <div style="display:flex; gap:18px;">305 <div class="kbd-bubble">◻</div>306 <div class="kbd-bubble">😊</div>307 <div class="kbd-bubble">GIF</div>308 </div>309 <div style="display:flex; gap:18px;">310 <div class="kbd-bubble">⚙</div>311 <div class="kbd-bubble">🌐</div>312 <div class="kbd-bubble">🎨</div>313 </div>314 <div class="kbd-bubble">🎙</div>315 </div>316 317 <div class="keys-row">318 <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>319 <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>320 </div>321 322 <div class="keys-row">323 <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>324 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>325 </div>326 327 <div class="keys-row">328 <div class="key wide">?123</div>329 <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>330 <div class="key">N</div><div class="key">M</div>331 <div class="key wide">⌫</div>332 </div>333 334 <div class="bottom-row">335 <div class="key wide">,</div>336 <div class="key">😊</div>337 <div class="key xwide">Space</div>338 <div class="key">.</div>339 <div class="key wide">✔</div>340 </div>341 </div>342 343</div>344</body>345</html>