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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #212121;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 110px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; box-sizing: border-box; color: #444;19    font-weight: 600; font-size: 34px;20  }21  .status-right {22    display: flex; align-items: center; gap: 24px;23  }24  .status-dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; margin: 0 4px; }25 26  /* Search area */27  .search-header {28    position: absolute; top: 140px; left: 36px; right: 36px; display: flex; align-items: center; gap: 24px;29  }30  .back-btn {31    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;32  }33  .back-btn svg { width: 40px; height: 40px; }34  .search-bar {35    flex: 1; height: 120px; border: 3px solid #6C52FF; border-radius: 60px;36    display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;37  }38  .search-icon { width: 52px; height: 52px; margin-right: 22px; }39  .search-input {40    border: none; outline: none; font-size: 40px; width: 100%;41    color: #2E2E2E; background: transparent;42  }43 44  /* Keyboard */45  .keyboard {46    position: absolute; bottom: 110px; left: 0; width: 100%; height: 900px;47    background: #F3EDF7; border-top: 1px solid #E1D8EB; box-sizing: border-box;48  }49  .suggest-row {50    height: 110px; display: flex; align-items: center; gap: 24px;51    padding: 0 28px; box-sizing: border-box; color: #3F3F3F; font-size: 36px;52  }53  .chip-sep { color: #9A9A9A; margin: 0 10px; }54  .suggest-fill {55    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;56  }57  .circle-btn {58    width: 80px; height: 80px; border-radius: 40px; background: #E7E0FF;59    display: flex; align-items: center; justify-content: center;60  }61  .circle-btn svg { width: 40px; height: 40px; }62 63  .key-row {64    display: flex; gap: 12px; padding: 0 26px; margin-top: 18px;65  }66  .key {67    background: #FFFFFF; border-radius: 18px; height: 120px;68    flex: 0 0 92px; display: flex; align-items: center; justify-content: center;69    font-size: 48px; color: #222; position: relative;70    box-shadow: 0 1px 0 rgba(0,0,0,0.06);71  }72  .key .hint {73    position: absolute; top: 10px; left: 12px; font-size: 26px; color: #9A9A9A; font-weight: 600;74  }75  .key-wide { flex: 0 0 126px; }76  .space-key { flex: 1 1 auto; }77  .accent-key { background: #E7E0FF; color: #2E275E; font-weight: 600; }78  .icon-key svg { width: 52px; height: 52px; }79 80  /* Gesture bar */81  .gesture-bar {82    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);83    width: 260px; height: 12px; background: #BFBFBF; border-radius: 10px;84  }85</style>86</head>87<body>88<div id="render-target">89  <div class="status-bar">90    <div class="status-left">11:15</div>91    <div class="status-right">92      <!-- simple gray blocks to mimic small indicators -->93      <div style="width:36px;height:24px;background:#BDBDBD;border-radius:6px;"></div>94      <div style="width:36px;height:24px;background:#BDBDBD;border-radius:6px;"></div>95      <div style="width:36px;height:24px;background:#BDBDBD;border-radius:6px;"></div>96      <span class="status-dot"></span>97      <!-- WiFi icon -->98      <svg width="40" height="40" viewBox="0 0 24 24">99        <path d="M2 8c5-5 15-5 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>100        <path d="M6 12c3-3 9-3 12 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>101        <path d="M10 16c2-2 2-2 4 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>102        <circle cx="12" cy="18.5" r="1.5" fill="#555"/>103      </svg>104      <!-- Battery icon -->105      <svg width="46" height="40" viewBox="0 0 28 16">106        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>107        <rect x="3" y="4" width="14" height="8" rx="1" fill="#555"/>108        <rect x="24" y="5" width="3" height="6" rx="1" fill="#555"/>109      </svg>110    </div>111  </div>112 113  <div class="search-header">114    <div class="back-btn">115      <svg viewBox="0 0 24 24">116        <path d="M15 5l-7 7 7 7" fill="none" stroke="#6C52FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>117      </svg>118    </div>119    <div class="search-bar">120      <svg class="search-icon" viewBox="0 0 24 24">121        <circle cx="11" cy="11" r="7" stroke="#7A7A7A" stroke-width="2.2" fill="none"/>122        <path d="M20 20l-4-4" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round"/>123      </svg>124      <input class="search-input" type="text" value="Papa johns restaurant">125    </div>126  </div>127 128  <div class="keyboard">129    <div class="suggest-row">130      <div class="circle-btn">131        <!-- 3x3 grid icon -->132        <svg viewBox="0 0 24 24">133          <g fill="#6C52FF">134            <circle cx="6" cy="6" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="6" r="2"/>135            <circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>136            <circle cx="6" cy="18" r="2"/><circle cx="12" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>137          </g>138        </svg>139      </div>140      <div class="suggest-fill">141        restaurant <span class="chip-sep">|</span> restaurants <span class="chip-sep">|</span> Restaurant142      </div>143      <div class="circle-btn">144        <!-- Mic icon -->145        <svg viewBox="0 0 24 24">146          <rect x="8" y="4" width="8" height="12" rx="4" fill="#6C52FF"/>147          <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#6C52FF" stroke-width="2" fill="none" stroke-linecap="round"/>148          <path d="M12 20v3" stroke="#6C52FF" stroke-width="2" stroke-linecap="round"/>149        </svg>150      </div>151    </div>152 153    <!-- Row 1 -->154    <div class="key-row">155      <div class="key"><span class="hint">1</span>q</div>156      <div class="key"><span class="hint">2</span>w</div>157      <div class="key"><span class="hint">3</span>e</div>158      <div class="key"><span class="hint">4</span>r</div>159      <div class="key"><span class="hint">5</span>t</div>160      <div class="key"><span class="hint">6</span>y</div>161      <div class="key"><span class="hint">7</span>u</div>162      <div class="key"><span class="hint">8</span>i</div>163      <div class="key"><span class="hint">9</span>o</div>164      <div class="key"><span class="hint">0</span>p</div>165    </div>166 167    <!-- Row 2 -->168    <div class="key-row">169      <div class="key">a</div>170      <div class="key">s</div>171      <div class="key">d</div>172      <div class="key">f</div>173      <div class="key">g</div>174      <div class="key">h</div>175      <div class="key">j</div>176      <div class="key">k</div>177      <div class="key">l</div>178    </div>179 180    <!-- Row 3 -->181    <div class="key-row">182      <div class="key key-wide icon-key">183        <!-- Shift icon -->184        <svg viewBox="0 0 24 24">185          <path d="M12 4l7 8h-4v8H9v-8H5l7-8z" fill="#6C52FF"/>186        </svg>187      </div>188      <div class="key">z</div>189      <div class="key">x</div>190      <div class="key">c</div>191      <div class="key">v</div>192      <div class="key">b</div>193      <div class="key">n</div>194      <div class="key">m</div>195      <div class="key key-wide icon-key">196        <!-- Backspace icon -->197        <svg viewBox="0 0 24 24">198          <path d="M3 12l6-7h11a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-6-7z" fill="#FFFFFF" stroke="#6C52FF" stroke-width="2"/>199          <path d="M12 9l6 6M18 9l-6 6" stroke="#6C52FF" stroke-width="2" stroke-linecap="round"/>200        </svg>201      </div>202    </div>203 204    <!-- Row 4 -->205    <div class="key-row">206      <div class="key key-wide accent-key">?123</div>207      <div class="key accent-key">,</div>208      <div class="key accent-key icon-key">209        <!-- Emoji simple smile -->210        <svg viewBox="0 0 24 24">211          <circle cx="12" cy="12" r="10" fill="none" stroke="#6C52FF" stroke-width="2"/>212          <circle cx="9" cy="10" r="1.5" fill="#6C52FF"/>213          <circle cx="15" cy="10" r="1.5" fill="#6C52FF"/>214          <path d="M8 15c2 2 6 2 8 0" stroke="#6C52FF" stroke-width="2" fill="none" stroke-linecap="round"/>215        </svg>216      </div>217      <div class="key space-key"> </div>218      <div class="key accent-key">.</div>219      <div class="key key-wide accent-key icon-key">220        <!-- Search action key -->221        <svg viewBox="0 0 24 24">222          <circle cx="11" cy="11" r="7" stroke="#6C52FF" stroke-width="2.2" fill="none"/>223          <path d="M20 20l-4-4" stroke="#6C52FF" stroke-width="2.2" stroke-linecap="round"/>224        </svg>225      </div>226    </div>227  </div>228 229  <div class="gesture-bar"></div>230</div>231</body>232</html>