GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f2023; /* dark app background */13    border-radius: 0; box-shadow: none;14    color: #e9e9ea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 96px; padding: 0 36px;21    display: flex; align-items: center; justify-content: space-between;22    color: #f5f5f7; font-weight: 600; letter-spacing: 0.2px;23  }24  .status-left { display: flex; align-items: center; gap: 18px; }25  .status-right { display: flex; align-items: center; gap: 22px; }26  .sb-icon {27    width: 28px; height: 28px; border-radius: 6px; background: #3a3b3f; opacity: 0.9;28  }29  .battery {30    width: 40px; height: 22px; border: 2px solid #dcdcdc; border-radius: 4px; position: relative;31  }32  .battery:after {33    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 10px; background: #dcdcdc; border-radius: 2px;34  }35  .battery .level { position: absolute; left: 2px; top: 2px; height: 16px; width: 26px; background: #dcdcdc; border-radius: 2px; }36 37  /* Header search area */38  .header {39    position: absolute; top: 120px; left: 36px; right: 36px;40    display: flex; align-items: center; gap: 24px;41  }42  .back-btn {43    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;44  }45  .search-bar {46    flex: 1;47    height: 104px; border-radius: 52px;48    border: 2px solid #6b6c70; background: #252629;49    display: flex; align-items: center;50    padding: 0 30px;51  }52  .search-icon {53    width: 44px; height: 44px; margin-right: 16px;54  }55  .search-input {56    flex: 1; font-size: 42px; color: #eaeaea;57  }58  .clear-btn {59    width: 54px; height: 54px; margin-left: 18px; display: flex; align-items: center; justify-content: center;60  }61  .accent { color: #ff7a90; }62 63  /* Suggestion */64  .suggestion {65    position: absolute; top: 360px; left: 48px;66    font-size: 60px; font-weight: 700; color: #ff7a90;67  }68 69  /* Bottom nav */70  .bottom-nav {71    position: absolute; left: 0; width: 100%;72    height: 140px; background: #252629;73    top: 1360px; /* sits above keyboard */74    display: flex; align-items: center; justify-content: space-around;75    border-top: 1px solid #2f3034;76  }77  .nav-item {78    display: flex; flex-direction: column; align-items: center; gap: 14px; color: #b8b9bd; font-size: 28px;79  }80  .nav-item.active { color: #ff7a90; font-weight: 600; }81  .nav-icon { width: 48px; height: 48px; }82 83  /* Keyboard */84  .keyboard {85    position: absolute; left: 0; right: 0; bottom: 0;86    height: 900px; background: #121212; border-top: 1px solid #2a2a2a;87  }88  .kb-suggestions {89    height: 90px; display: flex; align-items: center; gap: 26px; padding: 0 36px; color: #e1d7c6;90    font-size: 34px;91  }92  .chip {93    padding: 14px 26px; background: #1f1f1f; border: 1px solid #3a3a3a; border-radius: 24px; color: #d8d1c0;94  }95  .kb-rows { padding: 20px 28px; }96  .row { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }97  .key {98    width: 88px; height: 112px; background: #1b1b1b; border-radius: 18px;99    display: flex; align-items: center; justify-content: center;100    color: #e6e1d7; font-size: 40px; border: 1px solid #2a2a2a;101  }102  .key.wide { width: 140px; }103  .key.extra-wide { width: 220px; }104  .key.space { flex: 1; height: 112px; min-width: 420px; }105  .kb-bottom {106    display: flex; align-items: center; gap: 16px; padding: 18px 28px; margin-top: 18px;107  }108  .enter {109    margin-left: auto; width: 120px; height: 120px; background: #f6d58b; color: #1b1b1b;110    border-radius: 36px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700;111  }112  .mic {113    width: 90px; height: 90px; background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 22px;114    display: flex; align-items: center; justify-content: center; color: #e6e1d7; font-size: 40px;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status Bar -->122  <div class="status-bar">123    <div class="status-left">124      <div style="font-size: 40px;">10:45</div>125      <div class="sb-icon" title="weather"></div>126      <div class="sb-icon" title="store"></div>127      <div class="sb-icon" title="download"></div>128    </div>129    <div class="status-right">130      <svg width="38" height="26" viewBox="0 0 38 26">131        <path d="M2 24h34c-4-10-10-18-17-18S6 14 2 24z" fill="#dcdcdc"/>132        <circle cx="32" cy="6" r="3" fill="#dcdcdc"/>133      </svg>134      <div class="battery"><div class="level"></div></div>135    </div>136  </div>137 138  <!-- Header with Search -->139  <div class="header">140    <div class="back-btn">141      <svg width="44" height="44" viewBox="0 0 48 48">142        <path d="M30 10 L16 24 L30 38" stroke="#ff7a90" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143      </svg>144    </div>145    <div class="search-bar">146      <svg class="search-icon" viewBox="0 0 48 48">147        <circle cx="20" cy="20" r="12" stroke="#9aa0a6" stroke-width="4" fill="none"/>148        <path d="M32 32 L44 44" stroke="#9aa0a6" stroke-width="4" stroke-linecap="round"/>149      </svg>150      <div class="search-input">Apple pie</div>151      <div class="clear-btn">152        <svg width="44" height="44" viewBox="0 0 48 48">153          <path d="M12 12 L36 36 M36 12 L12 36" stroke="#ff7a90" stroke-width="4" stroke-linecap="round"/>154        </svg>155      </div>156    </div>157  </div>158 159  <!-- Suggestion -->160  <div class="suggestion">apple pie</div>161 162  <!-- Bottom Navigation -->163  <div class="bottom-nav">164    <div class="nav-item active">165      <svg class="nav-icon" viewBox="0 0 48 48">166        <circle cx="20" cy="20" r="12" stroke="#ff7a90" stroke-width="4" fill="none"/>167        <path d="M32 32 L44 44" stroke="#ff7a90" stroke-width="4" stroke-linecap="round"/>168      </svg>169      <div>Discover</div>170    </div>171    <div class="nav-item">172      <svg class="nav-icon" viewBox="0 0 48 48">173        <path d="M16 34c8 8 16 0 16 0" stroke="#b8b9bd" stroke-width="4" fill="none" stroke-linecap="round"/>174        <rect x="12" y="12" width="24" height="16" rx="6" stroke="#b8b9bd" stroke-width="4" fill="none"/>175      </svg>176      <div>Community</div>177    </div>178    <div class="nav-item">179      <svg class="nav-icon" viewBox="0 0 48 48">180        <path d="M8 16h32l-4 14H12z" stroke="#b8b9bd" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181        <circle cx="18" cy="38" r="3" fill="#b8b9bd"/>182        <circle cx="30" cy="38" r="3" fill="#b8b9bd"/>183      </svg>184      <div>My Cart</div>185    </div>186    <div class="nav-item">187      <svg class="nav-icon" viewBox="0 0 48 48">188        <circle cx="24" cy="18" r="10" stroke="#b8b9bd" stroke-width="4" fill="none"/>189        <path d="M8 42c8-10 24-10 32 0" stroke="#b8b9bd" stroke-width="4" fill="none" stroke-linecap="round"/>190      </svg>191      <div>Profile</div>192    </div>193  </div>194 195  <!-- Keyboard -->196  <div class="keyboard">197    <div class="kb-suggestions">198      <div class="chip">pie</div>199      <div class="chip">pies</div>200      <div class="chip">🥧</div>201      <div class="mic">🎙️</div>202    </div>203 204    <div class="kb-rows">205      <div class="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>207        <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>208      </div>209      <div class="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>211        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>212        <div class="key wide">⌫</div>213      </div>214      <div class="row">215        <div class="key wide">⇧</div>216        <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>217        <div class="key">n</div><div class="key">m</div>218        <div class="key wide">.</div>219      </div>220      <div class="kb-bottom">221        <div class="key wide">?123</div>222        <div class="key wide">,</div>223        <div class="key space"></div>224        <div class="enter">✓</div>225      </div>226    </div>227  </div>228 229</div>230</body>231</html>