GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Search UI - Sports Shoes</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Status bar */13  .status-bar {14    height:140px; background:#e9e9e9; color:#333; padding:0 36px;15    display:flex; align-items:center; justify-content:space-between;16    box-sizing:border-box;17  }18  .status-time { font-size:48px; font-weight:600; }19  .status-icons { display:flex; align-items:center; gap:24px; }20  .icon { display:inline-flex; align-items:center; justify-content:center; }21 22  /* Search bar */23  .search-wrap { padding:24px 24px 12px 24px; background:#f9f9f9; }24  .search-bar {25    background:#fff; border-radius:28px; height:120px;26    box-shadow: 0 2px 0 rgba(0,0,0,0.06);27    display:flex; align-items:center; gap:24px; padding:0 32px;28    border:1px solid #e5e5e5;29  }30  .search-input { flex:1; font-size:46px; color:#2c2c2c; }31  .search-input .caret { width:2px; height:56px; background:#4285f4; display:inline-block; vertical-align:middle; margin-left:6px; }32  .mic-btn {33    width:88px; height:88px; border-radius:44px; background:#cfe2ff;34    display:flex; align-items:center; justify-content:center;35    border:1px solid #9fb9ff;36  }37 38  /* Sections */39  .section { padding:24px; }40  .section-title {41    display:flex; align-items:center; justify-content:space-between;42    font-weight:800; letter-spacing:1px; color:#333; font-size:46px; text-transform:uppercase;43    margin-top:6px; margin-bottom:24px;44  }45  .section-title .right-action { font-size:40px; color:#1a73e8; font-weight:600; }46  .recent-items { display:flex; gap:56px; padding:0 8px; }47  .recent-item { width:240px; text-align:center; }48  .circle-img {49    width:170px; height:170px; border-radius:85px; margin:0 auto 16px auto;50    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;51    display:flex; align-items:center; justify-content:center; font-size:28px; padding:8px; box-sizing:border-box;52  }53  .recent-item .label { font-size:40px; color:#333; }54  .trending-title { display:flex; align-items:center; gap:18px; }55  .chips { display:flex; flex-wrap:wrap; gap:24px; margin-top:12px; }56  .chip {57    padding:26px 32px; background:#f5f5f7; border:1px solid #e0e0e0; border-radius:18px;58    font-size:40px; color:#2e2e2e;59  }60 61  /* Keyboard overlay */62  .keyboard {63    position:absolute; left:0; bottom:28px; width:100%; height:960px;64    background:#1f1f1f; color:#fff; border-top-left-radius:24px; border-top-right-radius:24px;65    box-shadow: 0 -8px 16px rgba(0,0,0,0.25);66  }67  .kb-suggestion {68    height:120px; background:#2a2a2a; display:flex; align-items:center; justify-content:space-between;69    padding:0 28px; box-sizing:border-box; border-top-left-radius:24px; border-top-right-radius:24px;70  }71  .kb-pill {72    color:#eaeaea; border-right:1px solid #444; padding:0 28px; font-size:40px; height:100%; display:flex; align-items:center;73  }74  .kb-suggestion .kb-emoji { font-size:44px; padding:0 28px; }75  .kb-suggestion .kb-mic {76    width:68px; height:68px; border-radius:34px; background:#3a3a3a; display:flex; align-items:center; justify-content:center;77  }78  .kb-row { display:flex; justify-content:center; gap:16px; padding:22px 28px; }79  .key {80    width:90px; height:120px; background:#2c2c2c; border-radius:18px; display:flex; align-items:center; justify-content:center;81    font-size:44px; color:#f5f5f5; border:1px solid #3a3a3a;82  }83  .key.wide { width:140px; }84  .space { flex:1; height:120px; background:#2c2c2c; border-radius:18px; border:1px solid #3a3a3a; display:flex; align-items:center; justify-content:center; font-size:40px; color:#ddd; margin:0 10px; }85  .circle-key {86    width:128px; height:128px; border-radius:64px; background:#cfe2ff; color:#0b3ea6; font-weight:700;87    display:flex; align-items:center; justify-content:center; border:1px solid #9fb9ff;88  }89  .gesture-bar {90    position:absolute; left:50%; transform:translateX(-50%);91    bottom:8px; width:300px; height:10px; border-radius:6px; background:#e6e6e6;92  }93 94  /* Small helpers */95  .divider { height:20px; background:#f1f1f1; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status Bar -->102  <div class="status-bar">103    <div class="status-time">9:30</div>104    <div class="status-icons">105      <!-- Network -->106      <svg class="icon" width="60" height="60" viewBox="0 0 60 60">107        <path d="M6 36 L30 18 L54 36" stroke="#444" stroke-width="4" fill="none"/>108        <circle cx="30" cy="42" r="4" fill="#444"/>109      </svg>110      <!-- Battery -->111      <svg class="icon" width="70" height="60" viewBox="0 0 70 60">112        <rect x="6" y="14" width="52" height="32" rx="6" stroke="#444" stroke-width="4" fill="none"/>113        <rect x="60" y="22" width="6" height="16" rx="1" fill="#444"/>114        <rect x="12" y="20" width="36" height="20" rx="4" fill="#444"/>115      </svg>116    </div>117  </div>118 119  <!-- Search Input Area -->120  <div class="search-wrap">121    <div class="search-bar">122      <!-- Back arrow -->123      <svg width="64" height="64" viewBox="0 0 64 64">124        <path d="M40 16 L22 32 L40 48" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125      </svg>126      <div class="search-input">sports shoes <span class="caret"></span></div>127      <div class="mic-btn">128        <svg width="40" height="40" viewBox="0 0 40 40">129          <rect x="14" y="8" width="12" height="16" rx="6" fill="#1a73e8"/>130          <path d="M10 20 C10 28 30 28 30 20" stroke="#1a73e8" stroke-width="4" fill="none" />131          <rect x="18" y="26" width="4" height="8" fill="#1a73e8"/>132          <rect x="14" y="32" width="12" height="3" rx="2" fill="#1a73e8"/>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- Recent Searches -->139  <div class="section">140    <div class="section-title">141      <div>RECENT SEARCHES</div>142      <div class="right-action">Edit</div>143    </div>144 145    <div class="recent-items">146      <div class="recent-item">147        <div class="circle-img">[IMG: Football]</div>148        <div class="label">Football</div>149      </div>150      <div class="recent-item">151        <div class="circle-img">[IMG: Grey Shoe]</div>152        <div class="label">Addidas Shoes</div>153      </div>154    </div>155  </div>156 157  <!-- Divider -->158  <div class="divider"></div>159 160  <!-- Trending Searches -->161  <div class="section">162    <div class="section-title">163      <div class="trending-title">164        <span>TRENDING SEARCHES</span>165        <svg width="46" height="46" viewBox="0 0 46 46">166          <path d="M8 32 L20 22 L28 26 L36 16" stroke="#2f2f2f" stroke-width="4" fill="none" stroke-linecap="round"/>167          <path d="M36 16 L36 26 L26 26" stroke="#2f2f2f" stroke-width="4" fill="none" stroke-linecap="round"/>168        </svg>169      </div>170      <span></span>171    </div>172 173    <div class="chips">174      <div class="chip">Trekking Shoes</div>175      <div class="chip">Running Shoes For Men</div>176      <div class="chip">Rain Coats</div>177      <div class="chip">Rain Jacket For Men</div>178      <div class="chip">Men Waterproof 1/2 Zip Rain Jacket - Blac</div>179    </div>180  </div>181 182  <!-- Recently Viewed header (partially visible in screenshot) -->183  <div class="section">184    <div class="section-title">185      <div>RECENTLY VIEWED</div>186      <span></span>187    </div>188  </div>189 190  <!-- Keyboard Overlay -->191  <div class="keyboard">192    <div class="kb-suggestion">193      <div class="kb-pill">shoes</div>194      <div class="kb-pill" style="border-right:none;">SHOES</div>195      <div class="kb-emoji">👟</div>196      <div class="kb-mic">197        <svg width="40" height="40" viewBox="0 0 40 40">198          <rect x="14" y="8" width="12" height="16" rx="6" fill="#dcdcdc"/>199          <path d="M10 20 C10 28 30 28 30 20" stroke="#dcdcdc" stroke-width="4" fill="none" />200        </svg>201      </div>202    </div>203 204    <!-- Row 1 -->205    <div class="kb-row">206      <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>207    </div>208    <!-- Row 2 -->209    <div class="kb-row">210      <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>211    </div>212    <!-- Row 3 -->213    <div class="kb-row">214      <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>215      <div class="key">⌫</div>216    </div>217    <!-- Row 4 -->218    <div class="kb-row">219      <div class="key wide">?123</div>220      <div class="key">,</div>221      <div class="key">🙂</div>222      <div class="space">space</div>223      <div class="key">.</div>224      <div class="circle-key">225        <!-- Search icon -->226        <svg width="56" height="56" viewBox="0 0 56 56">227          <circle cx="24" cy="24" r="16" stroke="#0b3ea6" stroke-width="4" fill="none"/>228          <line x1="36" y1="36" x2="52" y2="52" stroke="#0b3ea6" stroke-width="4"/>229        </svg>230      </div>231    </div>232  </div>233 234  <!-- Gesture bar -->235  <div class="gesture-bar"></div>236</div>237</body>238</html>