GD-ML/AndroidCode

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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#222; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;10  }11  .status-bar {12    height: 90px; padding: 20px 30px 0 30px; display: flex; align-items: center; justify-content: space-between; color:#222;13    font-weight: 600; font-size: 36px;14  }15  .status-icons { display: flex; gap: 22px; align-items: center; }16  .dot { width: 20px; height: 20px; background:#777; border-radius:50%; }17  .bar { width: 28px; height: 20px; border:2px solid #666; border-radius:4px; }18  .triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 20px solid #666; }19  .search-row { display:flex; align-items:center; padding: 30px; gap: 20px; }20  .icon-btn { width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; }21  .search-box {22    flex: 1; height: 116px; background:#f4f5f7; border-radius: 58px; display:flex; align-items:center; padding: 0 36px; gap: 24px;23  }24  .search-box svg { width: 48px; height: 48px; fill: none; stroke: #777; stroke-width: 4px; }25  .placeholder { font-size: 42px; color:#6b7280; }26  .section-title { font-size: 54px; font-weight: 700; padding: 10px 30px; margin-top: 8px; color:#222; }27  .chips { display:flex; flex-wrap: wrap; padding: 0 24px 10px 24px; }28  .chip {29    font-size: 42px; color:#333; padding: 22px 30px; margin: 14px; border:2px solid #e0e0e0; border-radius: 50px; background:#fff;30  }31  .purple { color:#6f4bd3; }32  .brands { padding: 10px 24px; display:flex; gap: 28px; justify-content: space-between; }33  .brand-card {34    width: 228px; height: 228px; border-radius: 40px; background:#fff; box-shadow: 0 2px 0 rgba(0,0,0,0.02);35    display:flex; align-items:center; justify-content:center; border:1px solid #eee;36  }37  .img-ph {38    width: 86%; height: 86%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size: 32px; border-radius: 24px;39  }40  .banner-section { padding: 20px 24px; }41  .banner {42    width: 1032px; height: 520px; background:#6f4bd3; border-radius: 38px; position: relative; overflow:hidden; display:flex; align-items:center; justify-content: space-between; padding: 40px;43  }44  .banner .left {45    color:#fff; width: 520px;46  }47  .banner .left .small { font-size: 34px; opacity: 0.9; }48  .banner .left .big { font-size: 68px; font-weight: 800; line-height: 1.15; margin-top: 16px; }49  .banner .right {50    width: 420px; height: 400px; display:flex; align-items:flex-end; justify-content:flex-end;51  }52  .banner .img-ph { width: 420px; height: 400px; border-radius: 24px; background:#E0E0E0; border-color:#BDBDBD; font-size: 30px; }53  .home-indicator {54    position:absolute; bottom: 26px; left:50%; transform:translateX(-50%);55    width: 360px; height: 12px; background:#111; border-radius: 12px; opacity:0.8;56  }57</style>58</head>59<body>60<div id="render-target">61 62  <!-- Status Bar -->63  <div class="status-bar">64    <div>8:19</div>65    <div class="status-icons">66      <div class="dot" title="App Icon"></div>67      <div class="dot" title="App Icon"></div>68      <div class="bar" title="Battery"></div>69      <div class="dot" title="Signal"></div>70    </div>71  </div>72 73  <!-- Search -->74  <div class="search-row">75    <div class="icon-btn">76      <svg viewBox="0 0 24 24">77        <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>78      </svg>79    </div>80    <div class="search-box">81      <svg viewBox="0 0 24 24">82        <circle cx="10" cy="10" r="6"></circle>83        <path d="M16 16 L22 22"></path>84      </svg>85      <div class="placeholder">What are you looking for?</div>86    </div>87  </div>88 89  <!-- Recent Searches -->90  <div class="section-title">Recent Searches</div>91  <div class="chips">92    <div class="chip">stuffed Pikachu</div>93    <div class="chip">Pikachu</div>94    <div class="chip">dragon</div>95    <div class="chip">firefly</div>96    <div class="chip">sportscar</div>97  </div>98 99  <!-- Trending Searches -->100  <div class="section-title">Trending Searches</div>101  <div class="chips">102    <div class="chip">Bicycle</div>103    <div class="chip">Playground Sets</div>104    <div class="chip">Trampolines</div>105    <div class="chip">Swing & Slides</div>106    <div class="chip">Playhouse</div>107    <div class="chip">Scooters</div>108    <div class="chip">Goal Post</div>109    <div class="chip">Battery Powered Ride Ons</div>110    <div class="chip">Football</div>111  </div>112 113  <!-- Trending Brands -->114  <div class="section-title purple">Trending Brands</div>115  <div class="brands">116    <div class="brand-card">117      <div class="img-ph">[IMG: INTEX Logo]</div>118    </div>119    <div class="brand-card">120      <div class="img-ph">[IMG: Bestway Logo]</div>121    </div>122    <div class="brand-card">123      <div class="img-ph">[IMG: Step2 Logo]</div>124    </div>125    <div class="brand-card">126      <div class="img-ph">[IMG: Nerf Logo]</div>127    </div>128  </div>129 130  <!-- Get Ready For Summer -->131  <div class="section-title purple">Get Ready For Summer</div>132  <div class="banner-section">133    <div class="banner">134      <div class="left">135        <div class="small">Shop now</div>136        <div class="big">Swimming Pool Collections</div>137      </div>138      <div class="right">139        <div class="img-ph">[IMG: Family in Above-Ground Pool]</div>140      </div>141    </div>142  </div>143 144  <!-- Home Indicator -->145  <div class="home-indicator"></div>146 147</div>148</body>149</html>