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 UI with Keyboard</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F3F3F3;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 90px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 32px; color: #222; font-weight: 500; font-size: 34px;19  }20  .status-icons { display: flex; align-items: center; gap: 18px; color: #555; }21  .status-icons span { font-size: 28px; }22 23  /* Search app bar */24  .search-bar {25    position: absolute; top: 90px; left: 0; right: 0; height: 120px;26    background: #FFFFFF; display: flex; align-items: center;27    padding: 0 24px; box-shadow: 0 1px 0 rgba(0,0,0,0.08);28  }29  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }30  .search-input {31    flex: 1; color: #222; font-size: 44px; letter-spacing: 0.2px;32    padding: 0 20px;33    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;34  }35  .search-actions { display: flex; align-items: center; gap: 8px; color: #5F6368; }36 37  /* Suggestion row */38  .suggestions {39    position: absolute; top: 210px; left: 0; right: 0;40    background: #FFFFFF; border-top: 1px solid #E6E6E6;41  }42  .suggestion-item {43    height: 120px; display: flex; align-items: center; padding: 0 24px;44    color: #444; font-size: 38px;45    border-bottom: 1px solid #EFEFEF;46  }47  .suggestion-text { flex: 1; margin-left: 16px; color: #606368; }48 49  /* Keyboard */50  .keyboard {51    position: absolute; left: 0; right: 0; bottom: 44px; height: 980px;52    background: #1E2125; color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.25);53  }54  .kbd-toolbar {55    height: 90px; background: #1A1D21; display: flex; align-items: center;56    padding: 0 18px; color: #cfd3d7; font-size: 36px; gap: 24px;57    border-bottom: 1px solid #262A2F;58  }59  .kbd-toolbar .chip { color: #e7eaee; }60  .divider { width: 1px; height: 40px; background: #2d3238; }61  .kbd-rows { padding: 18px 16px 12px; }62  .row { display: flex; justify-content: space-between; margin: 10px 4px; }63  .key {64    background: #2B2F34; border-radius: 18px; height: 120px; min-width: 88px;65    margin: 0 6px; display: flex; align-items: center; justify-content: center;66    font-size: 44px; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);67  }68  .key.small { min-width: 80px; }69  .key.wide { flex: 1; }70  .key.icon { padding: 0 18px; }71  .space { flex: 3; }72  .ghost { background: transparent; box-shadow: none; }73 74  .action-green {75    background: #6BEAB3; color: #0a0a0a; border-radius: 34px; height: 120px;76    min-width: 160px; font-weight: 600;77  }78  .left-green {79    background: #6BEAB3; color: #0a0a0a; border-radius: 30px; height: 110px; min-width: 180px;80  }81 82  /* Bottom gesture pill */83  .nav-pill {84    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);85    width: 300px; height: 10px; background: #E7E7E7; border-radius: 10px;86  }87 88  svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 2.5; }89  .muted svg { color: #6b6f74; }90  .light svg { color: #9aa0a6; }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status Bar -->97  <div class="status-bar">98    <div>9:51</div>99    <div class="status-icons">100      <span>☀️</span>101      <span>💡</span>102      <span>☁️</span>103      <span>104        <!-- signal/wifi -->105        <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 19l0 .01"/></svg>106      </span>107      <span>108        <!-- battery -->109        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="10" width="2" height="4"></rect><rect x="4" y="8" width="14" height="8" fill="#4CAF50" stroke="none"></rect></svg>110      </span>111      <span>100%</span>112    </div>113  </div>114 115  <!-- Search Bar -->116  <div class="search-bar">117    <div class="icon-btn muted">118      <!-- Back arrow -->119      <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6"/><path d="M20 12H9"/></svg>120    </div>121    <div class="search-input">Jockey Black Vest for Men</div>122    <div class="search-actions">123      <div class="icon-btn">124        <!-- Clear X -->125        <svg viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6"/></svg>126      </div>127      <div class="icon-btn">128        <!-- Mic -->129        <svg viewBox="0 0 24 24"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>130      </div>131    </div>132  </div>133 134  <!-- Suggestions -->135  <div class="suggestions">136    <div class="suggestion-item">137      <div class="muted">138        <!-- magnifier -->139        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M16.5 16.5L21 21"/></svg>140      </div>141      <div class="suggestion-text">jockey black vest for men</div>142      <div class="light" style="width:64px;height:64px;display:flex;align-items:center;justify-content:center;">143        <!-- enter/right arrow -->144        <svg viewBox="0 0 24 24"><path d="M4 4v8a4 4 0 0 0 4 4h7"/><path d="M15 12l4 4-4 4"/></svg>145      </div>146    </div>147  </div>148 149  <!-- Keyboard -->150  <div class="keyboard">151    <div class="kbd-toolbar">152      <div class="muted" style="width:64px; display:flex; align-items:center; justify-content:center;">153        <!-- grid icon -->154        <svg viewBox="0 0 24 24"><path d="M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h6v6h-6z"/></svg>155      </div>156      <span class="chip">Men</span>157      <span class="divider"></span>158      <span class="chip">Mens</span>159      <span class="divider"></span>160      <span class="chip">Men's</span>161      <div style="margin-left:auto; width:64px; display:flex; align-items:center; justify-content:center;">162        <!-- mic small -->163        <svg viewBox="0 0 24 24"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>164      </div>165    </div>166 167    <div class="kbd-rows">168      <!-- Row 1 -->169      <div class="row">170        <div class="key">q</div>171        <div class="key">w</div>172        <div class="key">e</div>173        <div class="key">r</div>174        <div class="key">t</div>175        <div class="key">y</div>176        <div class="key">u</div>177        <div class="key">i</div>178        <div class="key">o</div>179        <div class="key">p</div>180      </div>181 182      <!-- Row 2 -->183      <div class="row" style="padding: 0 40px;">184        <div class="key">a</div>185        <div class="key">s</div>186        <div class="key">d</div>187        <div class="key">f</div>188        <div class="key">g</div>189        <div class="key">h</div>190        <div class="key">j</div>191        <div class="key">k</div>192        <div class="key">l</div>193      </div>194 195      <!-- Row 3 -->196      <div class="row">197        <div class="key icon small">198          <!-- shift -->199          <svg viewBox="0 0 24 24"><path d="M12 3l7 7h-4v8H9v-8H5l7-7z"/></svg>200        </div>201        <div class="key">z</div>202        <div class="key">x</div>203        <div class="key">c</div>204        <div class="key">v</div>205        <div class="key">b</div>206        <div class="key">n</div>207        <div class="key">m</div>208        <div class="key icon small">209          <!-- backspace -->210          <svg viewBox="0 0 24 24"><path d="M22 6H9l-6 6 6 6h13z"/><path d="M12 9l6 6M18 9l-6 6"/></svg>211        </div>212      </div>213 214      <!-- Row 4 -->215      <div class="row">216        <div class="key left-green">?123</div>217        <div class="key">,</div>218        <div class="key icon small">219          <!-- emoji -->220          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 10h.01M16 10h.01"/><path d="M8 15c1.5 1 6.5 1 8 0"/></svg>221        </div>222        <div class="key space wide"></div>223        <div class="key">.</div>224        <div class="key action-green icon">225          <!-- search enter -->226          <svg viewBox="0 0 24 24" style="stroke:#0a0a0a;"><circle cx="11" cy="11" r="7"></circle><path d="M16.5 16.5L21 21"/></svg>227        </div>228      </div>229    </div>230  </div>231 232  <div class="nav-pill"></div>233</div>234</body>235</html>