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 Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Roboto, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 1080px; height: 120px;24    background: #d2d2d2;25  }26  .status-content {27    height: 100%;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    color: #333;33    font-size: 36px;34    font-weight: 500;35  }36  .status-icons {37    display: flex; align-items: center; gap: 24px;38  }39 40  /* Search header */41  .search-header {42    position: absolute;43    top: 120px; left: 0;44    width: 1080px; height: 180px;45    background: #ffffff;46    display: flex; align-items: center;47    padding: 0 32px;48    box-sizing: border-box;49  }50  .back-icon {51    width: 72px; height: 72px; margin-right: 20px;52  }53  .search-text {54    font-size: 48px; line-height: 1.2;55    color: #212121;56    flex: 1;57  }58  .clear-text {59    font-size: 42px;60    color: #8e8e8e;61    margin-left: 20px;62  }63  .divider {64    position: absolute;65    top: 300px; left: 32px; right: 32px;66    height: 2px; background: #eeeeee;67  }68 69  /* Content label */70  .suggestions-label {71    position: absolute;72    top: 340px; left: 32px;73    font-size: 42px;74    font-weight: 600;75    color: #333333;76  }77 78  /* Bottom quick actions above keyboard */79  .quick-actions {80    position: absolute;81    left: 0; width: 1080px; height: 180px;82    top: 1460px; /* Positioned just above keyboard */83    background: #fafafa;84    display: flex; align-items: center; justify-content: space-around;85    border-top: 1px solid #f0f0f0;86  }87  .action {88    display: flex; flex-direction: column; align-items: center; gap: 16px;89    color: #444;90  }91  .action svg { width: 72px; height: 72px; }92  .action span { font-size: 34px; color: #444; }93 94  /* Keyboard */95  .keyboard {96    position: absolute;97    bottom: 0; left: 0;98    width: 1080px; height: 760px;99    background: #1e1e1e;100    color: #eaeaea;101    box-sizing: border-box;102    border-top-left-radius: 24px;103    border-top-right-radius: 24px;104  }105  .kb-suggestion {106    height: 110px;107    background: #242424;108    display: flex; align-items: center; justify-content: space-between;109    padding: 0 28px; box-sizing: border-box;110    border-top-left-radius: 24px; border-top-right-radius: 24px;111    font-size: 36px;112  }113  .kb-suggestion .left, .kb-suggestion .right {114    display: flex; align-items: center; gap: 24px;115  }116  .kb-suggestion .tokens {117    display: flex; align-items: center; gap: 26px;118    color: #f1f1f1;119  }120  .kb-suggestion .separator { color: #9e9e9e; }121 122  .kb-rows {123    padding: 24px 24px 12px; box-sizing: border-box;124  }125  .kb-row {126    display: flex; justify-content: center; gap: 16px;127    margin-bottom: 22px;128  }129  .key {130    background: #2a2a2a; color: #f5f5f5;131    border: 1px solid #3a3a3a;132    height: 112px; min-width: 88px;133    border-radius: 16px;134    display: flex; align-items: center; justify-content: center;135    font-size: 44px; font-weight: 500;136  }137  .key.small { min-width: 120px; }138  .key.wide { min-width: 540px; }139  .key.circle {140    border-radius: 999px; min-width: 140px; height: 120px;141    background: #bcd0ea; color: #1e1e1e; border: none;142  }143  .key.light {144    background: #a9b3c3; color: #1e1e1e; border: none;145  }146  .key.icon {147    min-width: 140px;148    background: #2a2a2a;149  }150  .key svg { width: 48px; height: 48px; }151 152  /* Nav pill */153  .nav-pill {154    position: absolute; bottom: 18px; left: 50%;155    transform: translateX(-50%);156    width: 260px; height: 12px; background: #e6e6e6;157    border-radius: 12px;158    opacity: 0.9;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="status-content">168      <div>3:29</div>169      <div class="status-icons">170        <!-- Wi-Fi icon -->171        <svg viewBox="0 0 48 48">172          <path d="M4 16 C16 6 32 6 44 16" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>173          <path d="M10 22 C18 16 30 16 38 22" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>174          <circle cx="24" cy="30" r="3" fill="#333"/>175        </svg>176        <!-- Battery icon -->177        <svg viewBox="0 0 60 48">178          <rect x="4" y="10" width="46" height="28" rx="4" ry="4" stroke="#333" stroke-width="4" fill="none"/>179          <rect x="8" y="14" width="30" height="20" fill="#333"/>180          <rect x="52" y="18" width="6" height="12" rx="2" fill="#333"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Search Header -->187  <div class="search-header">188    <!-- Back -->189    <svg class="back-icon" viewBox="0 0 48 48">190      <path d="M28 8 L12 24 L28 40" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191    </svg>192    <div class="search-text">cotton halterneck dress for women</div>193    <div class="clear-text">Clear</div>194  </div>195  <div class="divider"></div>196 197  <!-- Suggestions label -->198  <div class="suggestions-label">Search suggestions</div>199 200  <!-- Quick Actions -->201  <div class="quick-actions">202    <div class="action">203      <svg viewBox="0 0 64 64">204        <rect x="8" y="16" width="48" height="36" rx="6" ry="6" stroke="#777" stroke-width="3" fill="none"/>205        <circle cx="32" cy="34" r="9" stroke="#777" stroke-width="3" fill="none"/>206      </svg>207      <span>Take photo</span>208    </div>209    <div class="action">210      <svg viewBox="0 0 64 64">211        <rect x="14" y="14" width="36" height="36" rx="6" ry="6" stroke="#777" stroke-width="3" fill="none"/>212        <path d="M14 28 L22 28 M42 28 L50 28 M14 36 L22 36 M42 36 L50 36" stroke="#777" stroke-width="3"/>213      </svg>214      <span>Scan Code</span>215    </div>216    <div class="action">217      <svg viewBox="0 0 64 64">218        <path d="M32 8 C22 8 14 16 14 26 C14 38 32 56 32 56 C32 56 50 38 50 26 C50 16 42 8 32 8 Z" stroke="#777" stroke-width="3" fill="none"/>219        <circle cx="32" cy="26" r="7" stroke="#777" stroke-width="3" fill="none"/>220      </svg>221      <span>Find stores</span>222    </div>223  </div>224 225  <!-- Keyboard -->226  <div class="keyboard">227    <div class="kb-suggestion">228      <div class="left">229        <!-- grid icon -->230        <svg viewBox="0 0 48 48">231          <rect x="4" y="4" width="16" height="16" fill="#dcdcdc"/>232          <rect x="28" y="4" width="16" height="16" fill="#dcdcdc"/>233          <rect x="4" y="28" width="16" height="16" fill="#dcdcdc"/>234          <rect x="28" y="28" width="16" height="16" fill="#dcdcdc"/>235        </svg>236      </div>237      <div class="tokens">238        <span>women</span>239        <span class="separator">|</span>240        <span>womens</span>241        <span class="separator">|</span>242        <span>women's</span>243      </div>244      <div class="right">245        <!-- mic icon -->246        <svg viewBox="0 0 48 48">247          <rect x="18" y="8" width="12" height="20" rx="6" fill="#dcdcdc"/>248          <path d="M12 22 C12 30 36 30 36 22" stroke="#dcdcdc" stroke-width="4" fill="none"/>249          <path d="M24 30 L24 40" stroke="#dcdcdc" stroke-width="4"/>250          <circle cx="24" cy="42" r="2" fill="#dcdcdc"/>251        </svg>252      </div>253    </div>254 255    <div class="kb-rows">256      <!-- Row 1 -->257      <div class="kb-row">258        <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>259        <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>260      </div>261      <!-- Row 2 -->262      <div class="kb-row">263        <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>264        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>265      </div>266      <!-- Row 3 -->267      <div class="kb-row">268        <div class="key small">269          <!-- shift icon -->270          <svg viewBox="0 0 48 48">271            <path d="M24 4 L40 20 H30 V40 H18 V20 H8 Z" fill="#f5f5f5"/>272          </svg>273        </div>274        <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>275        <div class="key small">276          <!-- backspace icon -