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.0" />6<title>Search History UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #f7f5f3;15    color: #1f1f1f;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 140px;23    background: #cfcfcf;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 44px;28    color: #ffffff;29  }30  .status-left { font-weight: 700; font-size: 42px; letter-spacing: 1px; opacity: 0.95; }31  .status-right {32    display: flex; align-items: center; gap: 26px;33  }34  .dot { width: 18px; height: 18px; background:#ffffff; border-radius: 50%; opacity: 0.9; }35  .battery {36    width: 42px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;37  }38  .battery::after {39    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;40  }41  .battery .lvl { position:absolute; left:3px; top:3px; bottom:3px; right:10px; background:#fff; }42 43  /* Content area */44  .content { position: absolute; left:0; right:0; top:140px; }45  .back-row {46    height: 120px; display: flex; align-items: center; padding: 0 34px;47  }48  .title-row {49    display: flex; align-items: center; justify-content: space-between;50    padding: 0 48px; height: 120px;51  }52  .title-row h1 {53    margin: 0; font-size: 54px; font-weight: 800; color:#1f1f1f;54  }55  .title-row .clear {56    font-size: 38px; color:#3d3d3d;57  }58 59  .list {60    background: #ffffff;61    border-top: 1px solid #ececec;62    border-bottom: 1px solid #ececec;63  }64  .item {65    height: 146px;66    display: flex; align-items: center;67    padding: 0 36px 0 44px;68    border-top: 1px solid #f0f0f0;69  }70  .item:first-child { border-top: none; }71  .item .left {72    width: 96px; display:flex; align-items:center; justify-content:center;73  }74  .item .label {75    flex: 1; font-size: 42px; color:#232323;76  }77  .item .right {78    width: 96px; display:flex; align-items:center; justify-content:center;79  }80 81  /* Bottom quick actions bar */82  .quick-actions {83    position: absolute; left:0; right:0; top: 1120px;84    height: 200px; background: #ffffff; border-top: 1px solid #ededed;85    display: flex; align-items: center; justify-content: space-around;86    text-align: center;87  }88  .qa {89    display: flex; flex-direction: column; align-items: center; gap: 18px; color:#2c2c2c;90  }91  .qa svg { width: 70px; height: 70px; }92  .qa span { font-size: 34px; }93 94  /* Keyboard */95  .keyboard {96    position: absolute; left:0; right:0; top: 1320px; height: 1080px;97    background: #1b1718; color:#efe8e9; padding: 28px 26px 60px;98    box-sizing: border-box;99  }100  .row { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }101  .key {102    background: #2a2526; color:#efe8e9; border-radius: 20px; padding: 28px 28px;103    min-width: 80px; text-align: center; font-size: 44px; line-height: 1;104  }105  .key.small { min-width: 72px; }106  .key.wide { min-width: 140px; }107  .key.extra-wide { min-width: 520px; }108  .pink { background: #e7c1cc; color:#1b1718; }109  .circle { width: 120px; height: 120px; border-radius: 60px; display:flex; align-items:center; justify-content:center; font-weight:700; }110 111  .home-indicator {112    position: absolute; left: 50%; transform: translateX(-50%);113    bottom: 18px; width: 300px; height: 10px; background: #e8e8e8; border-radius: 8px; opacity: 0.9;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Simulated status bar -->121  <div class="status-bar">122    <div class="status-left">10:44</div>123    <div class="status-right">124      <div class="dot"></div>125      <div class="battery"><div class="lvl"></div></div>126    </div>127  </div>128 129  <!-- Content -->130  <div class="content">131    <div class="back-row">132      <!-- Back arrow -->133      <svg width="56" height="56" viewBox="0 0 48 48">134        <path d="M30 8 L14 24 L30 40" stroke="#222" stroke-width="4.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>135      </svg>136    </div>137 138    <div class="title-row">139      <h1>Search history</h1>140      <div class="clear">Clear</div>141    </div>142 143    <div class="list">144      <div class="item">145        <div class="left">146          <!-- Clock icon -->147          <svg width="64" height="64" viewBox="0 0 64 64">148            <circle cx="32" cy="32" r="24" fill="none" stroke="#1f1f1f" stroke-width="3"></circle>149            <path d="M32 18 L32 34 L44 38" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round"></path>150          </svg>151        </div>152        <div class="label">shirts for men</div>153        <div class="right">154          <svg width="46" height="46" viewBox="0 0 48 48">155            <path d="M16 12 L32 24 L16 36" stroke="#1f1f1f" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>156          </svg>157        </div>158      </div>159 160      <div class="item">161        <div class="left">162          <svg width="64" height="64" viewBox="0 0 64 64">163            <circle cx="32" cy="32" r="24" fill="none" stroke="#1f1f1f" stroke-width="3"></circle>164            <path d="M32 18 L32 34 L44 38" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round"></path>165          </svg>166        </div>167        <div class="label">girls for dress</div>168        <div class="right">169          <svg width="46" height="46" viewBox="0 0 48 48">170            <path d="M16 12 L32 24 L16 36" stroke="#1f1f1f" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171          </svg>172        </div>173      </div>174 175      <div class="item">176        <div class="left">177          <svg width="64" height="64" viewBox="0 0 64 64">178            <circle cx="32" cy="32" r="24" fill="none" stroke="#1f1f1f" stroke-width="3"></circle>179            <path d="M32 18 L32 34 L44 38" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round"></path>180          </svg>181        </div>182        <div class="label">kids dresses</div>183        <div class="right">184          <svg width="46" height="46" viewBox="0 0 48 48">185            <path d="M16 12 L32 24 L16 36" stroke="#1f1f1f" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>186          </svg>187        </div>188      </div>189    </div>190  </div>191 192  <!-- Bottom quick action bar -->193  <div class="quick-actions">194    <div class="qa">195      <svg viewBox="0 0 48 48">196        <rect x="8" y="14" width="32" height="22" rx="3" ry="3" stroke="#222" stroke-width="2.5" fill="none"></rect>197        <circle cx="24" cy="25" r="6" stroke="#222" stroke-width="2.5" fill="none"></circle>198        <rect x="16" y="10" width="8" height="6" rx="2" fill="#222"></rect>199      </svg>200      <span>Take Photo</span>201    </div>202    <div class="qa">203      <svg viewBox="0 0 48 48">204        <rect x="6" y="6" width="36" height="36" rx="4" fill="none" stroke="#222" stroke-width="2.5"></rect>205        <rect x="16" y="16" width="16" height="16" fill="none" stroke="#222" stroke-width="2.5" stroke-dasharray="6 6"></rect>206      </svg>207      <span>Scan Code</span>208    </div>209    <div class="qa">210      <svg viewBox="0 0 48 48">211        <path d="M24 6c-6 0-11 5-11 11 0 9 11 19 11 19s11-10 11-19c0-6-5-11-11-11z" fill="none" stroke="#222" stroke-width="2.5"></path>212        <circle cx="24" cy="17" r="4" fill="none" stroke="#222" stroke-width="2.5"></circle>213      </svg>214      <span>Find Store</span>215    </div>216  </div>217 218  <!-- On-screen keyboard -->219  <div class="keyboard">220    <div class="row">221      <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>222      <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>223    </div>224    <div class="row">225      <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>226      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>227    </div>228    <div class="row">229      <div class="key wide">⇧</div>230      <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>231      <div class="key wide">⌫</div>232    </div>233    <div class="row">234      <div class="key circle pink">?123</div>235      <div class="key small">,</div>236      <div class="key small">🙂</div>237      <div class="key extra-wide">space</div>238      <div class="key small">.</div>239      <div class="key circle pink">🔍</div>240    </div>241    <div class="home-indicator"></div>242  </div>243 244</div>245</body>246</html>