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, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F7F7F7;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 160px;22    background: #D2D2D2;23    color: #fff;24  }25  .statusbar-inner {26    position: absolute;27    top: 56px; left: 40px; right: 40px;28    display: flex; align-items: center; justify-content: space-between;29    color: #FFFFFF;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex; align-items: center; gap: 22px;35  }36  .status-dot { width: 12px; height: 12px; background: #FFFFFF; border-radius: 50%; opacity: 0.9; }37  .status-ghost { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #FFFFFF; opacity: 0.9; }38 39  /* Header/navigation */40  .nav-row {41    position: absolute;42    top: 160px; left: 0; right: 0;43    height: 120px;44    display: flex; align-items: center;45    background: #FFFFFF;46  }47  .back-btn {48    width: 100px; height: 100px; margin-left: 20px; display: flex; align-items: center; justify-content: center;49  }50  .title-row {51    position: absolute;52    top: 280px; left: 0; right: 0;53    height: 180px;54    display: flex; align-items: center; justify-content: space-between;55    padding: 0 48px;56    background: #FFFFFF;57    border-bottom: 1px solid #EEEEEE;58  }59  .title-row .title {60    font-size: 48px; font-weight: 600; color: #222;61  }62  .title-row .clear {63    font-size: 38px; color: #777; font-weight: 500;64  }65 66  /* List item */67  .list {68    position: absolute;69    top: 460px; left: 0; right: 0;70    background: #FFFFFF;71  }72  .list-item {73    height: 160px;74    display: flex; align-items: center; justify-content: space-between;75    padding: 0 48px;76    border-bottom: 1px solid #EFEFEF;77  }78  .item-left {79    display: flex; align-items: center; gap: 28px;80  }81  .item-text {82    font-size: 40px; color: #333;83  }84 85  /* Bottom utility bar above keyboard */86  .utility-bar {87    position: absolute;88    left: 0; right: 0; bottom: 1040px;89    height: 220px;90    background: #FFFFFF;91    border-top: 1px solid #E8E8E8;92    display: flex; align-items: center; justify-content: space-around;93    padding: 24px 40px;94  }95  .util-item {96    display: flex; flex-direction: column; align-items: center; gap: 20px;97    color: #333;98  }99  .util-item span { font-size: 32px; color: #555; }100  .util-icon { width: 72px; height: 72px; }101 102  /* Keyboard mock */103  .keyboard {104    position: absolute;105    left: 0; right: 0; bottom: 120px;106    height: 920px;107    background: #191A1E;108    color: #fff;109    border-top: 1px solid #2A2B30;110  }111  .kb-row { display: flex; gap: 18px; padding: 26px 28px 0; }112  .key {113    flex: 1;114    max-width: 88px;115    height: 120px;116    background: #2A2B30;117    border-radius: 18px;118  }119  .kb-row.mid .key { max-width: 92px; }120  .kb-row.short .key { max-width: 96px; }121  .space-row {122    display: flex; align-items: center; gap: 18px;123    padding: 26px 28px 0;124  }125  .space { flex: 1; height: 120px; background: #2A2B30; border-radius: 18px; }126  .side-key { width: 140px; height: 120px; background: #2A2B30; border-radius: 18px; }127  .search-btn {128    width: 140px; height: 120px; background: #D7E4FF; border-radius: 60px;129    display: flex; align-items: center; justify-content: center;130  }131 132  /* Home gesture bar */133  .gesture {134    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);135    width: 320px; height: 12px; background: #D6D6D6; border-radius: 8px;136  }137 138  /* Icon colors */139  .icon-gray { fill: #5F5F5F; }140  .icon-dark { fill: #222; }141  .icon-light { fill: #FFFFFF; }142  .icon-muted { fill: #9C9C9C; }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="statusbar">150    <div class="statusbar-inner">151      <div style="font-size: 40px; color:#FFFFFF;">4:21</div>152      <div class="status-icons">153        <div class="status-ghost"></div>154        <div class="status-ghost"></div>155        <div class="status-ghost"></div>156        <div class="status-dot"></div>157      </div>158      <div class="status-icons">159        <!-- Wifi -->160        <svg width="46" height="30" viewBox="0 0 24 24" class="icon-light">161          <path d="M12 20c.8 0 1.5-.7 1.5-1.5S12.8 17 12 17s-1.5.7-1.5 1.5S11.2 20 12 20zM2 8c2.8-2.6 7-4 10-4s7.2 1.4 10 4l-2 2c-2.2-2-5.2-3-8-3s-5.8 1-8 3L2 8zm4 4c1.8-1.6 4.4-2.5 6-2.5s4.2.9 6 2.5l-2 2c-1.3-1.2-3.1-1.8-4-1.8s-2.7.6-4 1.8l-2-2z"/>162        </svg>163        <!-- Battery -->164        <svg width="46" height="30" viewBox="0 0 24 24" class="icon-light">165          <path d="M20 8h1v8h-1v2H4V6h16v2zM6 8v8h12V8H6z"/>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Back row -->172  <div class="nav-row">173    <div class="back-btn">174      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-dark">175        <path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/>176      </svg>177    </div>178  </div>179 180  <!-- Title row -->181  <div class="title-row">182    <div class="title">Search history</div>183    <div class="clear">Clear</div>184  </div>185 186  <!-- List -->187  <div class="list">188    <div class="list-item">189      <div class="item-left">190        <!-- Clock icon -->191        <svg width="52" height="52" viewBox="0 0 24 24" class="icon-muted">192          <path d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10zm0-18c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm-1 4h2v5.3l4 2-.9 1.7L11 13V8z"/>193        </svg>194        <div class="item-text">chunky sneakers</div>195      </div>196      <!-- Right arrow -->197      <svg width="40" height="40" viewBox="0 0 24 24" class="icon-gray">198        <path d="M8.5 4.5L16 12l-7.5 7.5-1.4-1.4L13.2 12 7.1 5.9l1.4-1.4z"/>199      </svg>200    </div>201  </div>202 203  <!-- Utility bar -->204  <div class="utility-bar">205    <div class="util-item">206      <svg class="util-icon" viewBox="0 0 24 24" class="icon-gray">207        <path class="icon-gray" d="M7 6h10l1 2h2v10H4V8h2l1-2zm5 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>208      </svg>209      <span>Take Photo</span>210    </div>211    <div class="util-item">212      <svg class="util-icon" viewBox="0 0 24 24">213        <path class="icon-gray" d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zm-8 10v4h4v2H4v-6h2zm12 0h2v6h-6v-2h4v-4z"/>214      </svg>215      <span>Scan Code</span>216    </div>217    <div class="util-item">218      <svg class="util-icon" viewBox="0 0 24 24">219        <path class="icon-gray" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>220      </svg>221      <span>Find Store</span>222    </div>223  </div>224 225  <!-- Keyboard mock -->226  <div class="keyboard">227    <!-- top tool icons row (approx) -->228    <div class="kb-row">229      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>230      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>231    </div>232    <div class="kb-row mid">233      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>234      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>235    </div>236    <div class="kb-row short">237      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>238      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>239    </div>240    <div class="space-row">241      <div class="side-key"></div>242      <div class="side-key"></div>243      <div class="space"></div>244      <div class="side-key"></div>245      <div class="search-btn">246        <svg width="48" height="48" viewBox="0 0 24 24">247          <path fill="#3B5BAE" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Home gesture bar -->254  <div class="gesture"></div>255 256</div>257</body>258</html>