GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shopping Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F7F7F8;13 color: #222;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: #F7F7F8;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 }29 .status-left {30 display: flex;31 align-items: center;32 gap: 18px;33 font-weight: 600;34 color: #222;35 font-size: 42px;36 }37 .dot { width: 14px; height: 14px; background: #8C8C8C; border-radius: 50%; display: inline-block; }38 .status-right {39 margin-left: auto;40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .status-icon {45 width: 34px; height: 34px; border-radius: 6px; background: #D9D9D9;46 }47 48 /* Search header */49 .search-row {50 position: absolute;51 top: 120px;52 left: 0;53 width: 1080px;54 height: 120px;55 display: flex;56 align-items: center;57 padding: 0 24px;58 box-sizing: border-box;59 gap: 20px;60 background: #FFFFFF;61 border-bottom: 1px solid #E6E6E6;62 }63 .icon-btn {64 width: 72px;65 height: 72px;66 border-radius: 18px;67 border: 1px solid #E0E0E0;68 background: #FFFFFF;69 display: flex; align-items: center; justify-content: center;70 box-shadow: 0 1px 2px rgba(0,0,0,0.06);71 }72 .back-icon svg { width: 36px; height: 36px; }73 .search-field {74 flex: 1;75 height: 84px;76 background: #F2F3F5;77 border: 1px solid #E0E0E0;78 border-radius: 20px;79 display: flex;80 align-items: center;81 padding: 0 24px;82 box-sizing: border-box;83 gap: 18px;84 font-size: 36px;85 color: #333;86 }87 .search-field .placeholder {88 flex: 1;89 white-space: nowrap;90 overflow: hidden;91 text-overflow: ellipsis;92 }93 .circle-btn {94 width: 60px; height: 60px;95 border-radius: 50%;96 background: #FFFFFF;97 border: 1px solid #D9D9D9;98 display: flex; align-items: center; justify-content: center;99 }100 .circle-btn svg { width: 28px; height: 28px; }101 102 /* Result title row */103 .title-row {104 position: absolute;105 top: 240px;106 left: 0;107 width: 1080px;108 height: 100px;109 display: flex;110 align-items: center;111 padding: 0 32px;112 box-sizing: border-box;113 background: #FFFFFF;114 border-bottom: 1px solid #EEE;115 gap: 16px;116 }117 .title-text {118 font-size: 42px;119 font-weight: 700;120 color: #232323;121 }122 .count {123 margin-left: auto;124 font-size: 36px;125 color: #4C4C4C;126 font-weight: 600;127 }128 .filter-icon {129 margin-left: 18px;130 width: 46px; height: 46px;131 border: 1px solid #DDD;132 border-radius: 10px;133 display: flex; align-items: center; justify-content: center;134 background: #FAFAFA;135 }136 137 /* Photo actions */138 .photo-actions {139 position: absolute;140 top: 340px;141 left: 0;142 width: 1080px;143 display: flex;144 justify-content: space-between;145 padding: 24px 32px;146 box-sizing: border-box;147 gap: 24px;148 }149 .action-card {150 width: 500px;151 height: 160px;152 background: #FFFFFF;153 border: 1px solid #E5E5E5;154 border-radius: 24px;155 display: flex;156 align-items: center;157 padding: 24px;158 box-sizing: border-box;159 gap: 24px;160 box-shadow: 0 2px 6px rgba(0,0,0,0.05);161 }162 .action-icon {163 width: 96px; height: 96px; border-radius: 20px;164 background: #F1F1F1; border: 1px solid #DADADA;165 display: flex; align-items: center; justify-content: center;166 }167 .action-card .label {168 font-size: 40px; font-weight: 700; color: #222;169 }170 171 /* Sections */172 .section-title {173 position: absolute;174 top: 540px;175 left: 32px;176 font-size: 40px;177 font-weight: 800;178 color: #2A2A2A;179 }180 181 /* Recent searches list */182 .recent-list {183 position: absolute;184 top: 620px;185 left: 0;186 width: 1080px;187 display: flex;188 gap: 20px;189 padding: 0 32px;190 box-sizing: border-box;191 }192 .recent-item {193 width: 330px;194 background: transparent;195 display: flex;196 align-items: center;197 flex-direction: column;198 gap: 16px;199 }200 .recent-thumb {201 width: 140px; height: 140px;202 border-radius: 50%;203 background: #E0E0E0;204 border: 1px solid #BDBDBD;205 display: flex; align-items: center; justify-content: center;206 color: #757575; font-size: 26px;207 }208 .recent-text {209 text-align: center;210 font-size: 34px;211 color: #444;212 line-height: 1.2;213 }214 215 /* Most searched articles */216 .articles-header {217 position: absolute;218 top: 900px;219 left: 0;220 width: 1080px;221 display: flex;222 align-items: center;223 padding: 0 32px;224 box-sizing: border-box;225 }226 .articles-title {227 font-size: 44px;228 font-weight: 800;229 color: #2A2A2A;230 }231 .view-all {232 margin-left: auto;233 padding: 22px 34px;234 background: #E94D58;235 color: #FFFFFF;236 font-size: 36px;237 font-weight: 700;238 border-radius: 20px;239 box-shadow: 0 2px 6px rgba(233,77,88,0.4);240 }241 242 .articles-grid {243 position: absolute;244 top: 980px;245 left: 0;246 width: 1080px;247 display: grid;248 grid-template-columns: repeat(3, 1fr);249 gap: 24px;250 padding: 0 32px;251 box-sizing: border-box;252 }253 .article-card {254 height: 260px;255 background: #FFFFFF;256 border: 1px solid #E6E6E6;257 border-radius: 20px;258 overflow: hidden;259 box-shadow: 0 2px 6px rgba(0,0,0,0.05);260 display: flex;261 flex-direction: column;262 }263 .article-image {264 flex: 1;265 background: #E0E0E0;266 border-bottom: 1px solid #BDBDBD;267 display: flex; align-items: center; justify-content: center;268 color: #666; font-size: 28px;269 }270 .article-caption {271 padding: 14px 16px; font-size: 30px; color: #444; height: 68px;272 }273 274 /* Keyboard overlay */275 .keyboard {276 position: absolute;277 bottom: 0;278 left: 0;279 width: 1080px;280 height: 920px;281 background: #121316;282 border-top: 1px solid #2A2A2A;283 box-sizing: border-box;284 padding: 22px 26px;285 }286 .suggestions {287 display: flex; gap: 22px; align-items: center;288 margin-bottom: 18px;289 }290 .chip {291 padding: 16px 22px;292 background: #1E2026;293 color: #EDEDED;294 border: 1px solid #2C2F36;295 border-radius: 22px;296 font-size: 32px;297 font-weight: 600;298 }299 .mic {300 margin-left: auto;301 width: 64px; height: 64px; border-radius: 32px;302 background: #1E2026; border: 1px solid #2C2F36;303 display: flex; align-items: center; justify-content: center;304 }305 .keys {306 display: grid;307 grid-template-columns: repeat(10, 1fr);308 gap: 16px;309 margin-top: 18px;310 }311 .key {312 height: 100px;313 background: #20232A;314 border: 1px solid #2E323A;315 color: #F0F0F0;316 border-radius: 16px;317 display: flex; align-items: center; justify-content: center;318 font-size: 40px; font-weight: 600;319 }320 .row {321 display: grid; gap: 16px; margin-top: 18px;322 }323 .row.qwerty { grid-template-columns: repeat(10, 1fr); }324 .row.asdfg { grid-template-columns: repeat(9, 1fr); padding: 0 56px; }325 .row.zxcvb { grid-template-columns: repeat(7, 1fr); padding: 0 160px; }326 .space-row {327 display: grid;328 grid-template-columns: 140px 1fr 140px 160px;329 gap: 16px;330 margin-top: 18px;331 align-items: center;332 }333 .space-key { height: 120px; background: #20232A; border: 1px solid #2E323A; border-radius: 16px; }334 .space-key.big { height: 120px; }335 .bottom-bar {336 position: absolute; bottom: 910px; left: 0; width: 1080px; height: 12px; background: transparent;337 }338 /* Small home indicator */339 .home-indicator {340 position: absolute;341 bottom: 10px;342 left: 50%;343 transform: translateX(-50%);344 width: 420px; height: 10px;345 background: #DADADA; border-radius: 6px;346 }347</style>348</head>349<body>350<div id="render-target">351 352 <!-- Status Bar -->353 <div class="status-bar">354 <div class="status-left">355 <span>8:49</span>356 <span class="dot"></span>357 <span class="dot"></span>358 <span class="dot"></span>359 </div>360 <div class="status-right">361 <div class="status-icon"></div>362 <div class="status-icon"></div>363 </div>364 </div>365 366 <!-- Search Row -->367 <div class="search-row">368 <div class="icon-btn back-icon">369 <svg viewBox="0 0 24 24">370 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>371 </svg>372 </div>373 <div class="search-field">374 <svg viewBox="0 0 24 24" width="32" height="32">375 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>376 <path d="M15 15l6 6" stroke="#666" stroke-width="2" stroke-linecap="round"></path>377 </svg>378 <div class="placeholder">black formal pants for women</div>379 <div class="circle-btn">380 <svg viewBox="0 0 24 24">381 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>382 </svg>383 </div>384 </div>385 </div>386 387 <!-- Title Row -->388 <div class="title-row">389 <div class="title-text">Black Formal Pants For Women</div>390 <div class="count">562</div>391 <div class="filter-icon">392 <svg viewBox="0 0 24 24" width="24" height="24">393 <path d="M4 7h16M7 12h10M10 17h4" stroke="#444" stroke-width="2" stroke-linecap="round"/>394 </svg>395 </div>396 </div>397 398 <!-- Photo Actions -->399 <div class="photo-actions">400 <div class="action-card">401 <div class="action-icon">402 <svg viewBox="0 0 24 24" width="38" height="38">403 <rect x="3" y="7" width="18" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"/>404 <circle cx="12" cy="13" r="4" fill="none" stroke="#666" stroke-width="2"/>405 <path d="M8 7l2-3h4l2 3" stroke="#666" stroke-width="2" fill="none"/>406 </svg>407 </div>408 <div class="label">Click a photo</div>409 </div>410 <div class="action-card">411 <div class="action-icon">412 <svg viewBox="0 0 24 24" width="38" height="38">413 <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#666" stroke-width="2"/>414 <path d="M9 9h6v6H9z" fill="none" stroke="#666" stroke-width="2"/>415 </svg>416 </div>417 <div class="label">Select a photo</div>418 </div>419 </div>420 421 <!-- Recent Searches -->422 <div class="section-title">RECENT SEARCHES</div>423 424 <div class="recent-list">425 <div class="recent-item">426 <div class="recent-thumb">[IMG]</div>427 <div class="recent-text">Laptop standin...</div>428 </div>429 <div class="recent-item">430 <div class="recent-thumb">[IMG]</div>431 <div class="recent-text">Golf shoes for men</div>432 </div>433 <div class="recent-item">434 <div class="recent-thumb">[IMG]</div>435 <div class="recent-text">Golf shoes for men</div>436 </div>437 </div>438 439 <!-- Most searched articles -->440 <div class="articles-header">441 <div class="articles-title">MOST SEARCHED ARTICLES</div>442 <div class="view-all">View All</div>443 </div>444 445 <div class="articles-grid">446 <div class="article-card">447 <div class="article-image">[IMG: Article 1]</div>448 <div class="article-caption">Trending item</div>449 </div>450 <div class="article-card">451 <div class="article-image">[IMG: Article 2]</div>452 <div class="article-caption">New arrivals</div>453 </div>454 <div class="article-card">455 <div class="article-image">[IMG: Article 3]</div>456 <div class="article-caption">Editor's pick</div>457 </div>458 </div>459 460 <!-- Keyboard Overlay -->461 <div class="keyboard">462 <div class="suggestions">463 <div class="chip">women</div>464 <div class="chip">womens</div>465 <div class="chip">women's</div>466 <div class="mic">467 <svg viewBox="0 0 24 24" width="28" height="28">468 <rect x="8" y="4" width="8" height="12" rx="4" fill="none" stroke="#DDD" stroke-width="2"/>469 <path d="M12 16v4M9 20h6" stroke="#DDD" stroke-width="2" stroke-linecap="round"/>470 </svg>471 </div>472 </div>473 474 <!-- Number/symbol row -->475 <div class="keys">476 <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>477 </div>478 479 <div class="row asdfg">480 <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>481 </div>482 483 <div class="row zxcvb">484 <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>485 </div>486 487 <div class="space-row">488 <div class="space-key key">?123</div>489 <div class="space-key big key"></div>490 <div class="space-key key">.</div>491 <div class="space-key key">✓</div>492 </div>493 </div>494 495 <div class="home-indicator"></div>496 497</div>498</body>499</html>