GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI - Dark Keyboard</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #181C1F; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #FFFFFF;20    font-size: 40px; letter-spacing: 0.5px;21  }22  .status-center {23    display: flex; gap: 26px; align-items: center;24    color: #D9D9D9;25  }26  .status-right {27    display: flex; gap: 26px; align-items: center;28  }29  .sb-icon {30    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;31  }32  .sb-icon svg { width: 40px; height: 40px; }33 34  /* Header */35  .header {36    position: absolute; top: 120px; left: 0; right: 0;37    height: 160px; display: flex; align-items: center;38    padding: 0 40px; gap: 28px;39    color: #CFCFCF;40  }41  .header .back {42    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;43  }44  .header-title {45    font-size: 68px; font-weight: 400;46  }47 48  /* Keyboard */49  .keyboard {50    position: absolute; left: 0; right: 0; bottom: 80px;51    height: 930px; background: #111417;52    border-top: 1px solid #24282B;53    display: flex; flex-direction: column;54  }55  .kbd-topbar {56    height: 150px; padding: 0 30px;57    display: flex; align-items: center; justify-content: space-between;58    color: #DADADA;59  }60  .kbd-btn {61    width: 96px; height: 96px; border-radius: 30px;62    background: #1F2326; border: 1px solid #2B2F32;63    display: flex; align-items: center; justify-content: center;64    color: #E0E0E0; font-size: 36px;65  }66  .kbd-btn svg { width: 54px; height: 54px; }67 68  .keys { padding: 0 28px; display: flex; flex-direction: column; gap: 18px; }69  .row {70    height: 180px; display: flex; align-items: center; justify-content: space-between;71  }72  .key {73    width: 92px; height: 140px; border-radius: 22px;74    background: #2A2E31; border: 1px solid #34383B;75    display: flex; align-items: center; justify-content: center;76    color: #D7D7D7; font-size: 48px; font-weight: 500;77  }78  .key.wide {79    width: 600px;80  }81  .key.medium {82    width: 140px;83  }84  .key.action {85    background: #2C3135; color: #EAEAEA;86  }87  .key.blue {88    background: #BFD2E8; color: #122A40;89  }90 91  .bottom-row {92    height: 200px; display: flex; align-items: center; justify-content: space-between;93    padding: 0 28px;94  }95  .pill {96    width: 260px; height: 140px; border-radius: 70px;97    background: #BFD2E8; color: #122A40; font-weight: 600; font-size: 44px;98    display: flex; align-items: center; justify-content: center;99  }100  .circle-btn {101    width: 140px; height: 140px; border-radius: 70px;102    background: #2A2E31; border: 1px solid #34383B;103    display: flex; align-items: center; justify-content: center;104    color: #EDEDED;105  }106  .circle-btn.blue {107    background: #BFD2E8; color: #122A40;108  }109  .circle-btn svg { width: 64px; height: 64px; }110 111  /* Gesture pill */112  .gesture-pill {113    position: absolute; bottom: 20px; left: 50%;114    transform: translateX(-50%);115    width: 280px; height: 12px; border-radius: 8px;116    background: #D9D9D9; opacity: 0.8;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status Bar -->124  <div class="status-bar">125    <div class="status-left">12:30</div>126 127    <div class="status-center">128      <span class="sb-icon">129        <svg viewBox="0 0 24 24" fill="none">130          <circle cx="12" cy="12" r="10" stroke="#CFCFCF" stroke-width="2"/>131          <line x1="12" y1="7" x2="12" y2="12" stroke="#CFCFCF" stroke-width="2"/>132          <circle cx="12" cy="16" r="1.6" fill="#CFCFCF"/>133        </svg>134      </span>135      <span class="sb-icon">136        <svg viewBox="0 0 24 24" fill="none">137          <path d="M12 5v10" stroke="#CFCFCF" stroke-width="2"/>138          <path d="M7 10l5-5 5 5" stroke="#CFCFCF" stroke-width="2"/>139        </svg>140      </span>141      <span class="sb-icon">142        <svg viewBox="0 0 24 24" fill="none">143          <rect x="4" y="5" width="16" height="14" rx="2" stroke="#CFCFCF" stroke-width="2"/>144          <polygon points="10,9 16,12 10,15" fill="#CFCFCF"/>145        </svg>146      </span>147      <span class="sb-icon">148        <svg viewBox="0 0 24 24" fill="none">149          <path d="M7 7h10v10H7z" stroke="#CFCFCF" stroke-width="2"/>150          <path d="M9 7V5a3 3 0 016 0v2" stroke="#CFCFCF" stroke-width="2"/>151        </svg>152      </span>153      <span class="sb-icon">154        <svg viewBox="0 0 24 24" fill="#CFCFCF">155          <circle cx="12" cy="12" r="3"/>156        </svg>157      </span>158    </div>159 160    <div class="status-right">161      <span class="sb-icon">162        <svg viewBox="0 0 24 24" fill="none">163          <path d="M3 17c3-4 6-6 9-6s6 2 9 6" stroke="#CFCFCF" stroke-width="2"/>164          <circle cx="12" cy="17" r="2" fill="#CFCFCF"/>165        </svg>166      </span>167      <span class="sb-icon">168        <svg viewBox="0 0 24 24" fill="none">169          <rect x="3" y="6" width="18" height="12" rx="2" stroke="#CFCFCF" stroke-width="2"/>170          <rect x="5" y="8" width="10" height="8" fill="#CFCFCF"/>171        </svg>172      </span>173    </div>174  </div>175 176  <!-- Header -->177  <div class="header">178    <div class="back">179      <svg viewBox="0 0 24 24" fill="none">180        <path d="M15 6L9 12l6 6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182    </div>183    <div class="header-title">Search</div>184  </div>185 186  <!-- Keyboard -->187  <div class="keyboard">188    <div class="kbd-topbar">189      <div class="kbd-btn">190        <svg viewBox="0 0 24 24" fill="#DADADA">191          <circle cx="7" cy="7" r="2"/>192          <circle cx="17" cy="7" r="2"/>193          <circle cx="7" cy="17" r="2"/>194          <circle cx="17" cy="17" r="2"/>195        </svg>196      </div>197      <div class="kbd-btn">198        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2">199          <circle cx="12" cy="10" r="3"/>200          <path d="M12 13c-4 0-5 2-5 4h10c0-2-1-4-5-4z"/>201        </svg>202      </div>203      <div class="kbd-btn" style="font-weight:700;">GIF</div>204      <div class="kbd-btn">205        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2">206          <circle cx="12" cy="12" r="7"/>207          <path d="M12 8v4l3 2"/>208        </svg>209      </div>210      <div class="kbd-btn">211        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2">212          <rect x="4" y="4" width="16" height="16" rx="2"/>213          <text x="9" y="15" font-size="8" fill="#DADADA">G</text>214        </svg>215      </div>216      <div class="kbd-btn">217        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2">218          <path d="M12 2v6M4 14c0-4 4-8 8-8s8 4 8 8" />219          <circle cx="12" cy="18" r="3" fill="#DADADA"/>220        </svg>221      </div>222      <div class="kbd-btn">223        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2">224          <path d="M12 4v8m5-3c0 3-2 5-5 5s-5-2-5-5" />225        </svg>226      </div>227    </div>228 229    <div class="keys">230      <div class="row">231        <div class="key">q</div>232        <div class="key">w</div>233        <div class="key">e</div>234        <div class="key">r</div>235        <div class="key">t</div>236        <div class="key">y</div>237        <div class="key">u</div>238        <div class="key">i</div>239        <div class="key">o</div>240        <div class="key">p</div>241      </div>242 243      <div class="row">244        <div class="key">a</div>245        <div class="key">s</div>246        <div class="key">d</div>247        <div class="key">f</div>248        <div class="key">g</div>249        <div class="key">h</div>250        <div class="key">j</div>251        <div class="key">k</div>252        <div class="key">l</div>253      </div>254 255      <div class="row">256        <div class="key medium action">257          <svg viewBox="0 0 24 24" fill="none">258            <path d="M15 18l-6-6 6-6" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>259          </svg>260        </div>261        <div class="key">z</div>262        <div class="key">x</div>263        <div class="key">c</div>264        <div class="key">v</div>265        <div class="key">b</div>266        <div class="key">n</div>267        <div class="key">m</div>268        <div class="key medium action">269          <svg viewBox="0 0 24 24" fill="none">270            <path d="M5 5h14v14H5z" fill="none"/>271            <path d="M8 16l8-8" stroke="#EDEDED" stroke-width="2" />272            <path d="M14 16h2v2h-2z" fill="#EDEDED"/>273          </svg>274        </div>275      </div>276    </div>277 278    <div class="bottom-row">279      <div class="pill">?123</div>280      <div class="circle-btn">,</div>281      <div class="circle-btn">282        <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">283          <circle cx="12" cy="9" r="3" />284          <path d="M12 12c-4 0-6 2-6 5h12c0-3-2-5-6-5z" />285        </svg>286      </div>287      <div class="key wide"></div>288      <div class="circle-btn">.</div>289      <div class="circle-btn blue">290        <svg viewBox="0 0 24 24" fill="none" stroke="#122A40" stroke-width="2">291          <circle cx="11" cy="11" r="6"/>292          <line x1="16.5" y1="16.5" x2="21" y2="21" />293        </svg>294      </div>295    </div>296  </div>297 298  <!-- Gesture navigation pill -->299  <div class="gesture-pill"></div>300 301</div>302</body>303</html>