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>Mobile UI - Search Page</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 100px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #666;25 font-size: 36px;26 }27 .status-right {28 display: flex;29 gap: 22px;30 align-items: center;31 }32 .dot { width: 10px; height: 10px; background:#9e9e9e; border-radius:50%; display:inline-block; }33 34 /* Search header */35 .search-area {36 padding: 8px 24px 18px 24px;37 border-bottom: 1px solid #eee;38 }39 .search-bar {40 height: 96px;41 border: 1px solid #e4e4e4;42 border-radius: 48px;43 display: flex;44 align-items: center;45 padding: 0 24px;46 gap: 18px;47 box-shadow: 0 1px 0 rgba(0,0,0,0.04);48 background: #fff;49 }50 .search-input {51 flex: 1;52 font-size: 44px;53 color: #1a73e8;54 outline: none;55 border: none;56 background: transparent;57 }58 .icon-btn {59 width: 64px;60 height: 64px;61 border-radius: 50%;62 display: flex;63 align-items: center;64 justify-content: center;65 }66 .icon-btn svg { width: 40px; height: 40px; fill: #424242; }67 68 /* Lens banner */69 .lens-banner {70 margin: 22px 24px 0 24px;71 background: #eef3ff;72 border-radius: 20px;73 padding: 26px;74 border: 1px solid #e1e6fb;75 }76 .lens-title {77 font-size: 36px;78 color: #2d2d2d;79 margin-bottom: 22px;80 }81 .lens-actions {82 display: flex;83 gap: 24px;84 }85 .lens-btn {86 flex: 1;87 height: 88px;88 background: #ffffff;89 border: 1px solid #dfe3f3;90 border-radius: 18px;91 display: flex;92 align-items: center;93 justify-content: center;94 gap: 16px;95 color: #1a73e8;96 font-weight: 600;97 font-size: 34px;98 box-shadow: 0 1px 0 rgba(0,0,0,0.03);99 }100 .lens-btn svg { width: 40px; height: 40px; fill: #1a73e8; }101 102 /* Content */103 .content {104 padding: 28px 24px 260px 24px;105 }106 .section-title {107 font-size: 40px;108 font-weight: 700;109 color: #212121;110 margin: 20px 8px 18px 8px;111 }112 .product-grid {113 display: grid;114 grid-template-columns: repeat(3, 1fr);115 gap: 24px;116 }117 .card {118 background: #fff;119 border: 1px solid #e3e3e3;120 border-radius: 22px;121 padding: 16px;122 }123 .card .img {124 width: 100%;125 height: 280px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 color: #757575;129 display: flex;130 align-items: center;131 justify-content: center;132 border-radius: 16px;133 font-size: 28px;134 text-align: center;135 }136 .card .title {137 margin-top: 16px;138 font-size: 34px;139 font-weight: 700;140 color: #212121;141 }142 .card .subtitle {143 font-size: 28px;144 color: #757575;145 margin-top: 4px;146 }147 148 /* Keyboard overlay */149 .keyboard {150 position: absolute;151 bottom: 0;152 left: 0;153 width: 1080px;154 height: 820px;155 background: #121212;156 border-top-left-radius: 18px;157 border-top-right-radius: 18px;158 box-shadow: 0 -2px 8px rgba(0,0,0,0.4);159 color: #fff;160 }161 .kb-toolbar {162 height: 100px;163 padding: 0 26px;164 display: flex;165 align-items: center;166 gap: 34px;167 }168 .kb-tool {169 width: 74px;170 height: 74px;171 background: #1f1f1f;172 border-radius: 16px;173 display: flex;174 align-items: center;175 justify-content: center;176 }177 .kb-tool svg { width: 36px; height: 36px; fill: #bdbdbd; }178 .kb-keys {179 padding: 10px 16px 0 16px;180 }181 .row {182 display: grid;183 grid-template-columns: repeat(10, 1fr);184 gap: 12px;185 margin: 12px 10px;186 }187 .row-mid { grid-template-columns: repeat(9, 1fr); padding: 0 48px; }188 .row-low { grid-template-columns: repeat(7, 1fr); padding: 0 120px; }189 .key {190 height: 108px;191 background: #2b2b2b;192 border-radius: 18px;193 display: flex;194 align-items: center;195 justify-content: center;196 font-size: 40px;197 color: #f3f3f3;198 }199 .space-row {200 display: grid;201 grid-template-columns: 180px 120px 120px 1fr 120px 160px;202 gap: 14px;203 padding: 8px 16px 16px 16px;204 align-items: center;205 }206 .key.small { font-size: 30px; }207 .key.space { height: 112px; border-radius: 26px; background:#2b2b2b; }208 .key.enter { background: #b5f5c8; color: #113d1f; font-weight: 700; }209 .home-handle {210 position: absolute;211 bottom: 14px;212 left: 50%;213 transform: translateX(-50%);214 width: 240px;215 height: 10px;216 background: #e8e8e8;217 border-radius: 6px;218 opacity: 0.85;219 }220 221 /* Simple utility SVG icons for the top area */222 .status-right svg { width: 34px; height: 34px; fill: #666; }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status bar -->229 <div class="status-bar">230 <div style="font-weight:600;">12:15</div>231 <div class="status-right">232 <!-- chat bubble -->233 <svg viewBox="0 0 24 24"><path d="M4 4h16v10H7l-3 3V4z"/></svg>234 <!-- signal -->235 <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-8H6v8zm4 0h2v-12h-2v12zm4 0h2V4h-2v16z"/></svg>236 <!-- NFC N -->237 <svg viewBox="0 0 24 24"><path d="M5 4h4l6 10V4h4v16h-4l-6-10v10H5V4z"/></svg>238 <!-- docs icon -->239 <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6V2zm8 1.5V8h5.5"/></svg>240 <span class="dot"></span>241 <!-- mute -->242 <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3z"/></svg>243 <!-- wifi -->244 <svg viewBox="0 0 24 24"><path d="M12 18l-3-3 3-3 3 3-3 3zm-9-7a16 16 0 0 1 18 0l-2 2a12 12 0 0 0-14 0L3 11z"/></svg>245 <!-- battery -->246 <svg viewBox="0 0 24 24"><path d="M16 6h2v12h-2V6zM4 7h12v10H4V7z"/></svg>247 </div>248 </div>249 250 <!-- Search area -->251 <div class="search-area">252 <div class="search-bar">253 <!-- magnifier -->254 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#424242" d="M9.5 3a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm6.8 9.4 4 4-1.4 1.4-4-4 1.4-1.4z"/></svg>255 <input class="search-input" value="tv"/>256 <!-- mic -->257 <div class="icon-btn">258 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-5 5.9V20h-2v-3.1A6 6 0 0 1 6 11z"/></svg>259 </div>260 <!-- camera -->261 <div class="icon-btn">262 <svg viewBox="0 0 24 24"><path d="M7 6h3l1-2h2l1 2h3a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3zm5 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/></svg>263 </div>264 </div>265 </div>266 267 <!-- Lens banner -->268 <div class="lens-banner">269 <div class="lens-title">Upload an image to search for similar products</div>270 <div class="lens-actions">271 <div class="lens-btn">272 <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3l1-2zm3 5a5 5 0 1 0 .002 10.002A5 5 0 0 0 12 8z"/></svg>273 <span>Take a photo</span>274 </div>275 <div class="lens-btn">276 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 2v10h12V7H6zm2 2h4v4H8V9z"/></svg>277 <span>Choose from gallery</span>278 </div>279 </div>280 </div>281 282 <!-- Product content -->283 <div class="content">284 <div class="section-title">Popular Products</div>285 <div class="product-grid">286 <!-- 1 -->287 <div class="card">288 <div class="img">[IMG: vivo phone T2X 5G]</div>289 <div class="title">vivo</div>290 <div class="subtitle">Mobiles</div>291 </div>292 <!-- 2 -->293 <div class="card">294 <div class="img">[IMG: boAt earbuds]</div>295 <div class="title">boAt</div>296 <div class="subtitle">Headset</div>297 </div>298 <!-- 3 -->299 <div class="card">300 <div class="img">[IMG: Stockings model]</div>301 <div class="title">Xs and Os</div>302 <div class="subtitle">Stockings</div>303 </div>304 <!-- 4 -->305 <div class="card">306 <div class="img">[IMG: Earbuds alt]</div>307 <div class="title">Aroma</div>308 <div class="subtitle">Earbuds</div>309 </div>310 <!-- 5 -->311 <div class="card">312 <div class="img">[IMG: Xiaomi Smart TV 5A]</div>313 <div class="title">Xiaomi</div>314 <div class="subtitle">Smart TV</div>315 </div>316 <!-- 6 -->317 <div class="card">318 <div class="img">[IMG: Beaded shoulder shawl]</div>319 <div class="title">Handicraft</div>320 <div class="subtitle">Jewelry Shawl</div>321 </div>322 </div>323 </div>324 325 <!-- Keyboard overlay -->326 <div class="keyboard">327 <div class="kb-toolbar">328 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></div>329 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H5v6h14v-6h-2V7a5 5 0 0 0-5-5z"/></svg></div>330 <div class="kb-tool"><span style="color:#bdbdbd;font-weight:700;">GIF</span></div>331 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5v6h5v2h-7V7h2z"/></svg></div>332 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M2 5h20v4H2V5zm0 5h20v9H2v-9zm5 2v5h10v-5H7z"/></svg></div>333 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9H12V3z"/></svg></div>334 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zM6 11h2a4 4 0 0 0 8 0h2a6 6 0 0 1-5 5.9V20h-2v-3.1A6 6 0 0 1 6 11z"/></svg></div>335 </div>336 337 <div class="kb-keys">338 <div class="row">339 <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>340 <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>341 </div>342 <div class="row row-mid">343 <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>344 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>345 </div>346 <div class="row row-low">347 <div class="key small">⇧</div><div class="key">Z</div><div class="key">X</div><div class="key">C</div>348 <div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>349 <div class="key small">⌫</div>350 </div>351 <div class="space-row">352 <div class="key small">?123</div>353 <div class="key small">,</div>354 <div class="key small">😊</div>355 <div class="key space"></div>356 <div class="key">.</div>357 <div class="key enter">✓</div>358 </div>359 </div>360 361 <div class="home-handle"></div>362 </div>363 364</div>365</body>366</html>