GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile Search UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background:#ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top:0;19    left:0;20    width:100%;21    height:140px;22    background:#e9e9e9;23    display:flex;24    align-items:center;25    padding:0 36px;26    box-sizing:border-box;27    color:#3e3e3e;28    font-weight:600;29    font-size:42px;30    letter-spacing:0.5px;31  }32  .status-right {33    margin-left:auto;34    display:flex;35    align-items:center;36    gap:28px;37  }38  .icon {39    width:44px;40    height:44px;41  }42  /* Simple icons */43  .wifi svg, .battery svg { width:44px; height:44px; }44 45  /* Search header area */46  .search-area {47    position:absolute;48    top:140px;49    left:0;50    width:100%;51    padding:30px 36px 24px;52    box-sizing:border-box;53    background:#f7f7f7;54  }55  .search-row {56    display:flex;57    align-items:center;58    gap:24px;59  }60  .back-btn {61    width:84px;62    height:84px;63    display:flex;64    align-items:center;65    justify-content:center;66    border-radius:42px;67    background:#ffffff;68    box-shadow:0 1px 0 rgba(0,0,0,0.06);69    border:1px solid #dddddd;70  }71  .search-pill {72    flex:1;73    height:120px;74    border-radius:60px;75    border:2px solid #dcdcdc;76    background:#ffffff;77    display:flex;78    align-items:center;79    padding:0 32px;80    box-sizing:border-box;81  }82  .search-text {83    font-size:46px;84    color:#666666;85  }86  .search-text .quote { color:#9a9a9a; }87  .search-text .typed { color:#2d2d2d; font-weight:600; }88  .mic-wrap {89    margin-left:auto;90    width:100px;91    height:100px;92    border-radius:50%;93    background:#cfe6ff;94    display:flex;95    align-items:center;96    justify-content:center;97    border:3px solid #9cc6ff;98  }99  .mic-wrap svg { width:56px; height:56px; fill:#1e73d6; }100 101  /* Sections */102  .section {103    margin-top:24px;104    padding:0 36px;105  }106  .section-title {107    font-size:56px;108    font-weight:800;109    letter-spacing:1px;110    color:#2c2c2c;111    display:flex;112    align-items:center;113  }114  .section-title .edit {115    margin-left:auto;116    font-size:44px;117    color:#1e73d6;118    font-weight:700;119  }120 121  /* Recent searches items */122  .recent-grid {123    margin-top:28px;124    display:flex;125    gap:52px;126    align-items:flex-start;127  }128  .recent-item {129    width:220px;130    text-align:center;131  }132  .circle-img {133    width:220px;134    height:220px;135    border-radius:50%;136    border:2px solid #cfcfcf;137    background:#E0E0E0;138    display:flex;139    align-items:center;140    justify-content:center;141    color:#757575;142    font-size:34px;143    padding:10px;144    box-sizing:border-box;145  }146  .recent-label {147    margin-top:22px;148    font-size:44px;149    color:#333333;150    font-weight:600;151  }152 153  /* Trending searches chips */154  .trend-title {155    font-size:56px;156    font-weight:800;157    color:#2c2c2c;158    display:flex;159    align-items:center;160    gap:18px;161  }162  .trend-title .trend-icon {163    width:40px; height:40px;164  }165  .chips {166    margin-top:26px;167    display:flex;168    flex-wrap:wrap;169    gap:24px;170  }171  .chip {172    padding:26px 38px;173    border:2px solid #dcdcdc;174    border-radius:28px;175    background:#ffffff;176    font-size:42px;177    color:#2f2f2f;178    box-shadow:0 1px 0 rgba(0,0,0,0.04);179  }180 181  /* Recently viewed heading (above keyboard) */182  .recently-viewed {183    margin-top:40px;184    padding:0 36px;185    font-size:56px;186    font-weight:800;187    color:#2c2c2c;188  }189 190  /* Keyboard mock */191  .keyboard {192    position:absolute;193    bottom:70px;194    left:0;195    width:100%;196    height:980px;197    background:#121212;198    border-top-left-radius:26px;199    border-top-right-radius:26px;200    box-shadow:0 -6px 16px rgba(0,0,0,0.25);201    padding:36px;202    box-sizing:border-box;203    color:#ffffff;204  }205  .kbd-top {206    display:flex;207    gap:40px;208    margin-bottom:40px;209  }210  .kbd-icon {211    width:88px;212    height:88px;213    border-radius:18px;214    background:#1e1e1e;215    border:1px solid #333;216    display:flex;217    align-items:center;218    justify-content:center;219    color:#dcdcdc;220    font-size:34px;221  }222 223  .row {224    display:flex;225    justify-content:space-between;226    margin-bottom:26px;227  }228  .key {229    width:92px;230    height:120px;231    border-radius:18px;232    background:#1f1f1f;233    border:1px solid #333;234    display:flex;235    align-items:center;236    justify-content:center;237    color:#f0f0f0;238    font-size:44px;239    box-sizing:border-box;240  }241  .key.wide { width:170px; }242  .spacer { width:20px; }243 244  /* Bottom home indicator */245  .home-indicator {246    position:absolute;247    bottom:18px;248    left:50%;249    transform:translateX(-50%);250    width:540px;251    height:12px;252    background:#e6e6e6;253    border-radius:6px;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <!-- Status Bar -->261  <div class="status-bar">262    <div>9:29</div>263    <div class="status-right">264      <div class="wifi">265        <svg viewBox="0 0 24 24"><path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6.6-6.6a10 10 0 0 0-13.2 0l1.4 1.4a8 8 0 0 1 10.4 0l1.4-1.4zm3.4-3.4a14 14 0 0 0-20 0l1.4 1.4a12 12 0 0 1 17.2 0l1.4-1.4z"/></svg>266      </div>267      <div class="battery">268        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#4a4a4a"/><rect x="21" y="9" width="2" height="6" fill="#4a4a4a"/></svg>269      </div>270    </div>271  </div>272 273  <!-- Search Area -->274  <div class="search-area">275    <div class="search-row">276      <div class="back-btn">277        <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5z"/></svg>278      </div>279      <div class="search-pill">280        <div class="search-text">281          Search for <span class="quote">"</span> <span class="typed">Runni</span> <span class="quote">"</span>282        </div>283        <div class="mic-wrap">284          <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 3zm5-3a5 5 0 0 1-10 0h-2a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>285        </div>286      </div>287    </div>288  </div>289 290  <!-- Recent Searches -->291  <div class="section">292    <div class="section-title">RECENT SEARCHES <span class="edit">Edit</span></div>293    <div class="recent-grid">294      <div class="recent-item">295        <div class="circle-img">[IMG: Football]</div>296        <div class="recent-label">Football</div>297      </div>298      <div class="recent-item">299        <div class="circle-img">[IMG: Addidas Shoes]</div>300        <div class="recent-label">Addidas Shoes</div>301      </div>302    </div>303  </div>304 305  <!-- Trending Searches -->306  <div class="section" style="margin-top:28px;">307    <div class="trend-title">308      TRENDING SEARCHES309      <svg class="trend-icon" viewBox="0 0 24 24"><path fill="#666" d="M3 17h2.5l5-5 3 3 3.5-3.5V15H21V9h-6v2.5l-2-2-5.5 5.5H3z"/></svg>310    </div>311    <div class="chips">312      <div class="chip">Trekking Shoes</div>313      <div class="chip">Running Shoes For Men</div>314      <div class="chip">Rain Coats</div>315      <div class="chip">Rain Jacket For Men</div>316      <div class="chip">Men Waterproof 1/2 Zip Rain Jacket - Blac</div>317    </div>318  </div>319 320  <!-- Recently viewed heading -->321  <div class="recently-viewed">RECENTLY VIEWED</div>322 323  <!-- Keyboard Mock -->324  <div class="keyboard">325    <div class="kbd-top">326      <div class="kbd-icon">◻</div>327      <div class="kbd-icon">🙂</div>328      <div class="kbd-icon">GIF</div>329      <div class="kbd-icon">⚙</div>330      <div class="kbd-icon">🌐</div>331      <div class="kbd-icon">🎨</div>332      <div class="kbd-icon">🎤</div>333    </div>334 335    <div class="row">336      <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>337    </div>338    <div class="row">339      <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>340    </div>341    <div class="row">342      <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 wide">⌫</div>343    </div>344    <div class="row" style="align-items:center;">345      <div class="key wide">?123</div>346      <div class="key">,</div>347      <div class="key wide">🙂</div>348      <div class="key" style="flex:1; height:120px;">Space</div>349      <div class="key">.</div>350      <div class="key wide">🔍</div>351    </div>352  </div>353 354  <div class="home-indicator"></div>355</div>356</body>357</html>