Download code/10100/10100_4.html from GD-ML/AndroidCode: direct link, hf CLI and curl.
- Browser
- Download file 10.8 kB
-
https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10100/10100_4.html
- Command line
-
hf download hf://datasets/GD-ML/AndroidCode/code/10100/10100_4.html
-
curl -L -o 10100_4.html https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10100/10100_4.html
10.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=1080, initial-scale=1.0"> | |
| <title>Search UI</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: transparent; | |
| font-family: "Roboto", "Segoe UI", Arial, sans-serif; | |
| } | |
| #render-target { | |
| width: 1080px; | |
| height: 2400px; | |
| position: relative; | |
| overflow: hidden; | |
| background: #FFFFFF; | |
| border-radius: 24px; | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.08); | |
| color: #222; | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| height: 96px; | |
| padding: 0 32px; | |
| display: flex; | |
| align-items: center; | |
| font-weight: 600; | |
| color: #222; | |
| } | |
| .status-time { | |
| font-size: 32px; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-right { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .status-dot { | |
| width: 14px; | |
| height: 14px; | |
| background: #9E9E9E; | |
| border-radius: 50%; | |
| } | |
| .status-icon { | |
| width: 40px; | |
| height: 24px; | |
| } | |
| /* Search header */ | |
| .search-header { | |
| padding: 12px 24px 0 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .back-btn { | |
| width: 72px; | |
| height: 72px; | |
| border: none; | |
| background: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: default; | |
| } | |
| .back-btn svg { | |
| width: 44px; | |
| height: 44px; | |
| fill: none; | |
| stroke: #3949AB; | |
| stroke-width: 6; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .search-field { | |
| flex: 1; | |
| height: 88px; | |
| background: #F4F5F7; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 24px; | |
| position: relative; | |
| border-bottom: 4px solid #F48FB1; | |
| } | |
| .query { | |
| font-size: 34px; | |
| color: #616161; | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .close-btn { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 28px; | |
| border: none; | |
| background: #E0E0E0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: default; | |
| } | |
| .close-btn svg { | |
| width: 28px; | |
| height: 28px; | |
| stroke: #616161; | |
| stroke-width: 6; | |
| fill: none; | |
| stroke-linecap: round; | |
| } | |
| /* Chips */ | |
| .chips-row { | |
| padding: 24px 24px 8px 24px; | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .chip { | |
| height: 96px; | |
| padding: 0 26px 0 10px; | |
| border-radius: 48px; | |
| border: 2px solid #E0E0E0; | |
| background: #FFFFFF; | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| color: #333; | |
| font-size: 32px; | |
| font-weight: 600; | |
| } | |
| .chip.active { | |
| border-color: #FF9EB4; | |
| background: #FFF0F4; | |
| color: #D81B60; | |
| } | |
| .chip-avatar { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| background: #E0E0E0; | |
| border: 1px solid #BDBDBD; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #757575; | |
| font-size: 18px; | |
| line-height: 1.1; | |
| text-align: center; | |
| padding: 6px; | |
| } | |
| /* Suggestions */ | |
| .suggestions { | |
| padding: 8px 24px 0 24px; | |
| } | |
| .suggestion { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: 26px 6px; | |
| border-radius: 16px; | |
| } | |
| .suggestion svg { | |
| width: 36px; | |
| height: 36px; | |
| stroke: #757575; | |
| stroke-width: 5; | |
| fill: none; | |
| } | |
| .suggestion .bold { | |
| font-weight: 700; | |
| color: #222; | |
| font-size: 36px; | |
| } | |
| .suggestion span { | |
| font-size: 34px; | |
| color: #424242; | |
| } | |
| .suggestion .muted { | |
| color: #9E9E9E; | |
| font-weight: 500; | |
| } | |
| /* Keyboard */ | |
| .keyboard { | |
| position: absolute; | |
| left: 0; | |
| bottom: 72px; | |
| width: 100%; | |
| height: 900px; | |
| background: #1F1F1F; | |
| border-top-left-radius: 24px; | |
| border-top-right-radius: 24px; | |
| box-shadow: 0 -6px 16px rgba(0,0,0,0.2); | |
| padding: 18px 22px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .kb-suggest { | |
| height: 80px; | |
| background: #2A2A2A; | |
| border-radius: 18px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| color: #E0E0E0; | |
| font-size: 30px; | |
| gap: 22px; | |
| } | |
| .kb-suggest .divider { | |
| width: 2px; | |
| height: 28px; | |
| background: #616161; | |
| margin: 0 8px; | |
| } | |
| .kb-suggest .mic { | |
| margin-left: auto; | |
| width: 32px; | |
| height: 32px; | |
| stroke: #B0BEC5; | |
| stroke-width: 4; | |
| fill: none; | |
| } | |
| .kb-row { | |
| display: grid; | |
| grid-template-columns: repeat(11, 1fr); | |
| gap: 12px; | |
| } | |
| .kb-row.row2 { | |
| grid-template-columns: repeat(10, 1fr); | |
| padding: 0 40px; | |
| } | |
| .kb-row.row3 { | |
| grid-template-columns: 1.2fr repeat(8, 1fr) 1.2fr; | |
| } | |
| .key { | |
| background: #2C2C2C; | |
| color: #FAFAFA; | |
| border-radius: 14px; | |
| height: 112px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 38px; | |
| font-weight: 500; | |
| box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06); | |
| } | |
| .key.small { | |
| height: 100px; | |
| font-size: 34px; | |
| } | |
| .key-func { | |
| background: #2A2A2A; | |
| color: #D6D6D6; | |
| font-weight: 600; | |
| } | |
| .space-key { | |
| flex: 1; | |
| height: 112px; | |
| background: #2C2C2C; | |
| border-radius: 14px; | |
| box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06); | |
| } | |
| .bottom-row { | |
| display: grid; | |
| grid-template-columns: 1.6fr 1.2fr 5.2fr 1.2fr 1.8fr; | |
| gap: 12px; | |
| padding: 0 16px; | |
| } | |
| .search-btn { | |
| background: #C7DAF6; | |
| color: #263238; | |
| } | |
| .search-btn svg { | |
| width: 38px; | |
| height: 38px; | |
| stroke: #263238; | |
| stroke-width: 5; | |
| fill: none; | |
| } | |
| .backspace svg { | |
| width: 36px; | |
| height: 36px; | |
| fill: none; | |
| stroke: #FAFAFA; | |
| stroke-width: 5; | |
| } | |
| .shift svg { | |
| width: 34px; | |
| height: 34px; | |
| fill: none; | |
| stroke: #FAFAFA; | |
| stroke-width: 5; | |
| } | |
| /* Gesture bar */ | |
| .gesture-bar { | |
| position: absolute; | |
| bottom: 18px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 280px; | |
| height: 10px; | |
| background: #E0E0E0; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="render-target"> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-time">10:27</div> | |
| <div class="status-right"> | |
| <div class="status-dot"></div> | |
| <svg class="status-icon" viewBox="0 0 24 24"> | |
| <path d="M3 18h18" stroke="#616161" stroke-width="2" /> | |
| <path d="M5 14h14" stroke="#616161" stroke-width="2" /> | |
| <path d="M8 10h8" stroke="#616161" stroke-width="2" /> | |
| </svg> | |
| <svg class="status-icon" viewBox="0 0 24 24"> | |
| <path d="M2 18h20M4 14h16M6 10h12" stroke="#616161" stroke-width="2" /> | |
| </svg> | |
| <svg class="status-icon" viewBox="0 0 24 24"> | |
| <rect x="2" y="6" width="16" height="12" rx="2" stroke="#616161" stroke-width="2" fill="none"/> | |
| <path d="M20 10v4" stroke="#616161" stroke-width="2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Search Header --> | |
| <div class="search-header"> | |
| <button class="back-btn" aria-label="Back"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M15 5L7 12l8 7" /> | |
| </svg> | |
| </button> | |
| <div class="search-field"> | |
| <span class="query">black formal pants for women</span> | |
| <button class="close-btn" aria-label="Clear"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M6 6l12 12M18 6L6 18"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Category Chips --> | |
| <div class="chips-row"> | |
| <div class="chip active"> | |
| <div class="chip-avatar">[IMG: Category]</div> | |
| <span>All</span> | |
| </div> | |
| <div class="chip"> | |
| <div class="chip-avatar">[IMG: Women]</div> | |
| <span>Women</span> | |
| </div> | |
| <div class="chip"> | |
| <div class="chip-avatar">[IMG: Men]</div> | |
| <span>Men</span> | |
| </div> | |
| <div class="chip"> | |
| <div class="chip-avatar">[IMG: Kids]</div> | |
| <span>Kids</span> | |
| </div> | |
| </div> | |
| <!-- Suggestions --> | |
| <div class="suggestions"> | |
| <div class="suggestion"> | |
| <svg viewBox="0 0 24 24"> | |
| <circle cx="10" cy="10" r="7"/> | |
| <path d="M15 15l6 6"/> | |
| </svg> | |
| <span class="bold">Black formal pants for women</span> | |
| </div> | |
| <div class="suggestion"> | |
| <svg viewBox="0 0 24 24"> | |
| <circle cx="10" cy="10" r="7"/> | |
| <path d="M15 15l6 6"/> | |
| </svg> | |
| <span>Black formal for women pant</span> | |
| </div> | |
| <div class="suggestion"> | |
| <svg viewBox="0 0 24 24"> | |
| <circle cx="10" cy="10" r="7"/> | |
| <path d="M15 15l6 6"/> | |
| </svg> | |
| <span><span class="muted">TINTED </span><span class="bold">Black Formal Pants for Women</span></span> | |
| </div> | |
| </div> | |
| <!-- Keyboard --> | |
| <div class="keyboard"> | |
| <div class="kb-suggest"> | |
| <span>women</span> | |
| <span class="divider"></span> | |
| <span>womens</span> | |
| <span class="divider"></span> | |
| <span>women's</span> | |
| <svg class="mic" viewBox="0 0 24 24"> | |
| <rect x="8" y="4" width="8" height="10" rx="4"/> | |
| <path d="M12 14v4M8 12c0 2.2 1.8 4 4 4s4-1.8 4-4" /> | |
| </svg> | |
| </div> | |
| <div class="kb-row row1"> | |
| <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> | |
| <div class="key backspace" aria-label="Backspace"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M4 12l6-6h10v12H10z"/> | |
| <path d="M12 9l6 6M18 9l-6 6"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="kb-row row2"> | |
| <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> | |
| <div class="key key-func">↵</div> | |
| </div> | |
| <div class="kb-row row3"> | |
| <div class="key shift" aria-label="Shift"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M12 4l8 8h-5v8H9v-8H4z"/> | |
| </svg> | |
| </div> | |
| <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> | |
| <div class="key key-func">⌫</div> | |
| </div> | |
| <div class="bottom-row"> | |
| <div class="key key-func">?123</div> | |
| <div class="key key-func">☺</div> | |
| <div class="space-key"></div> | |
| <div class="key key-func">.</div> | |
| <div class="key search-btn" aria-label="Search"> | |
| <svg viewBox="0 0 24 24"> | |
| <circle cx="10" cy="10" r="7"/> | |
| <path d="M15 15l6 6"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gesture bar --> | |
| <div class="gesture-bar"></div> | |
| </div> | |
| </body> | |
| </html> |