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 Contacts - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2F3238; /* overall dark background */13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14    color: #E0E0E0;15  }16 17  /* Status bar */18  .status {19    position: absolute; top: 0; left: 0; width: 100%; height: 96px;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px; color: #DADDE1; font-size: 42px;22  }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .icon { display: inline-flex; align-items: center; justify-content: center; }25  .icon svg { width: 48px; height: 48px; fill: none; stroke: #DADDE1; stroke-width: 3; }26 27  /* Search bar */28  .searchbar {29    position: absolute; top: 96px; left: 0; right: 0; height: 140px;30    display: flex; align-items: center; gap: 26px;31    padding: 0 40px; color: #C9CDD3;32  }33  .searchbar .label {34    font-size: 50px; color: #B9BDC2;35  }36  .searchbar .mic svg { width: 56px; height: 56px; stroke: #B9BDC2; }37  .divider {38    position: absolute; top: 236px; left: 0; right: 0; height: 2px;39    background: #3D4148;40  }41 42  /* Empty content area */43  .content {44    position: absolute; top: 238px; left: 0; right: 0; bottom: 980px;45    background: transparent;46  }47 48  /* Keyboard area */49  .keyboard {50    position: absolute; left: 0; bottom: 0; width: 100%; height: 980px;51    background: #212329; border-top: 1px solid #3B3F46;52    display: flex; flex-direction: column;53  }54 55  .kb-utils {56    height: 140px; display: flex; align-items: center;57    padding: 0 28px; gap: 40px; color: #EDEFF3;58  }59  .kb-utils .util {60    width: 92px; height: 92px; border-radius: 22px;61    background: #2A2C33; border: 1px solid #41454D;62    display: flex; align-items: center; justify-content: center;63  }64  .kb-utils .util svg { width: 44px; height: 44px; stroke: #FFFFFF; stroke-width: 2.5; }65 66  .keys { padding: 10px 40px; display: flex; flex-direction: column; gap: 30px; }67  .row { display: flex; justify-content: space-between; gap: 12px; }68  .key {69    width: 84px; height: 120px; border-radius: 18px;70    background: #33363D; color: #F1F2F4; font-size: 48px;71    display: flex; align-items: center; justify-content: center;72    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);73  }74  .key.dim { color: #BDC1C9; }75 76  .key-wide { width: 120px; }77  .space { flex: 1; height: 120px; border-radius: 18px; background: #33363D; }78  .function {79    width: 140px; height: 120px; border-radius: 28px;80    background: #C7D1FA; color: #2B2E34; font-weight: 600; font-size: 40px;81  }82  .key-circle {83    width: 120px; height: 120px; border-radius: 60px;84    background: #C7D1FA; display: flex; align-items: center; justify-content: center;85  }86  .key-circle svg { width: 56px; height: 56px; stroke: #2B2E34; stroke-width: 3; }87 88  /* bottom gesture bar */89  .gesture {90    height: 70px; display: flex; align-items: center; justify-content: center;91  }92  .gesture .bar {93    width: 300px; height: 10px; background: #EDEDED; border-radius: 6px;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status Bar -->101  <div class="status">102    <div class="status-left">103      8:31104      <span class="icon" style="margin-left:14px;">105        <!-- simple cloud -->106        <svg viewBox="0 0 48 48">107          <path d="M15 30h18a7 7 0 0 0 0-14h-1a9 9 0 0 0-17 3h-2a6 6 0 0 0 2 11z" />108        </svg>109      </span>110    </div>111    <div class="status-right">112      <span class="icon">113        <!-- wifi -->114        <svg viewBox="0 0 48 48">115          <path d="M6 16c10-8 26-8 36 0" />116          <path d="M12 22c7-6 17-6 24 0" />117          <path d="M18 28c4-3 8-3 12 0" />118          <circle cx="24" cy="34" r="2" fill="#DADDE1" stroke="none"></circle>119        </svg>120      </span>121      <span class="icon">122        <!-- battery -->123        <svg viewBox="0 0 48 48">124          <rect x="6" y="12" width="32" height="24" rx="4"></rect>125          <rect x="39" y="18" width="4" height="12" rx="1"></rect>126          <rect x="10" y="16" width="24" height="16" rx="2" fill="#DADDE1" stroke="none"></rect>127        </svg>128      </span>129    </div>130  </div>131 132  <!-- Search Bar -->133  <div class="searchbar">134    <span class="icon" style="margin-right:6px;">135      <!-- back arrow -->136      <svg viewBox="0 0 48 48">137        <path d="M30 8L14 24l16 16" />138      </svg>139    </span>140    <div class="label">Search contacts</div>141    <div style="margin-left:auto;" class="mic icon">142      <!-- microphone -->143      <svg viewBox="0 0 48 48">144        <rect x="18" y="10" width="12" height="18" rx="6"></rect>145        <path d="M12 22c0 8 24 8 24 0M24 30v6M18 36h12" />146      </svg>147    </div>148  </div>149  <div class="divider"></div>150 151  <!-- Content Area (blank state) -->152  <div class="content"></div>153 154  <!-- Keyboard -->155  <div class="keyboard">156    <!-- utilities row -->157    <div class="kb-utils">158      <div class="util">159        <!-- grid icon -->160        <svg viewBox="0 0 48 48">161          <rect x="7" y="7" width="12" height="12"></rect>162          <rect x="29" y="7" width="12" height="12"></rect>163          <rect x="7" y="29" width="12" height="12"></rect>164          <rect x="29" y="29" width="12" height="12"></rect>165        </svg>166      </div>167      <div class="util">168        <!-- emoji face -->169        <svg viewBox="0 0 48 48">170          <circle cx="24" cy="24" r="16"></circle>171          <circle cx="18" cy="20" r="2" fill="#FFFFFF" stroke="none"></circle>172          <circle cx="30" cy="20" r="2" fill="#FFFFFF" stroke="none"></circle>173          <path d="M16 28c4 4 12 4 16 0" />174        </svg>175      </div>176      <div class="util" style="font-size:34px; font-weight:700;">GIF</div>177      <div class="util">178        <!-- gear -->179        <svg viewBox="0 0 48 48">180          <circle cx="24" cy="24" r="6"></circle>181          <path d="M24 10v6M24 32v6M10 24h6M32 24h6M16 16l4 4M28 28l4 4M16 32l4-4M28 20l4-4" />182        </svg>183      </div>184      <div class="util">185        <!-- translate -->186        <svg viewBox="0 0 48 48">187          <path d="M10 34l8-20h4l8 20" />188          <path d="M14 26h12M30 18l8 8-8 8" />189        </svg>190      </div>191      <div class="util">192        <!-- palette -->193        <svg viewBox="0 0 48 48">194          <path d="M24 10c10 0 16 6 16 12s-6 8-10 6c-3-2-6 2-4 6-12 0-18-6-18-12S14 10 24 10z" />195          <circle cx="18" cy="16" r="2" fill="#FFFFFF" stroke="none"></circle>196          <circle cx="26" cy="16" r="2" fill="#FFFFFF" stroke="none"></circle>197        </svg>198      </div>199      <div class="util" style="margin-left:auto;">200        <!-- mic -->201        <svg viewBox="0 0 48 48">202          <rect x="18" y="10" width="12" height="18" rx="6"></rect>203          <path d="M12 22c0 8 24 8 24 0M24 30v6M18 36h12" />204        </svg>205      </div>206    </div>207 208    <!-- key rows -->209    <div class="keys">210      <!-- Row 1: QWERTYUIOP -->211      <div class="row">212        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>213        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>214        <div class="key">o</div><div class="key">p</div>215      </div>216 217      <!-- Row 2: ASDFGHJKL -->218      <div class="row" style="padding: 0 32px;">219        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>220        <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>221        <div class="key">l</div>222      </div>223 224      <!-- Row 3: shift + ZXCVBNM + backspace -->225      <div class="row">226        <div class="key key-wide dim">227          <!-- shift icon -->228          <svg viewBox="0 0 48 48">229            <path d="M24 10l12 14h-8v14h-8V24h-8z" fill="none" stroke="#BDC1C9" stroke-width="3"></path>230          </svg>231        </div>232        <div class="key">z</div><div class="key">x</div><div class="key">c</div>233        <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>234        <div class="key key-wide dim">235          <!-- backspace -->236          <svg viewBox="0 0 48 48">237            <path d="M14 12l-8 12 8 12h24a4 4 0 0 0 4-4V16a4 4 0 0 0-4-4H14z" fill="none" stroke="#BDC1C9" stroke-width="3"></path>238            <path d="M22 18l8 8M30 18l-8 8" stroke="#BDC1C9" stroke-width="3"></path>239          </svg>240        </div>241      </div>242 243      <!-- Bottom row: ?123 , emoji, space, . , search -->244      <div class="row">245        <div class="function">?123</div>246        <div class="key dim">,</div>247        <div class="key dim">248          <!-- small emoji -->249          <svg viewBox="0 0 48 48">250            <circle cx="24" cy="24" r="10" fill="none" stroke="#BDC1C9" stroke-width="3"></circle>251            <circle cx="20" cy="22" r="1.5" fill="#BDC1C9" stroke="none"></circle>252            <circle cx="28" cy="22" r="1.5" fill="#BDC1C9" stroke="none"></circle>253            <path d="M20 26c2 2 6 2 8 0" stroke="#BDC1C9" stroke-width="3" fill="none"></path>254          </svg>255        </div>256        <div class="space"></div>257        <div class="key dim">.</div>258        <div class="key-circle">259          <!-- search icon -->260          <svg viewBox="0 0 48 48">261            <circle cx="20" cy="20" r="10" fill="none"></circle>262            <path d="M28 28l10 10" />263          </svg>264        </div>265      </div>266    </div>267 268    <!-- gesture bar -->269    <div class="gesture">270      <div class="bar"></div>271    </div>272  </div>273 274</div>275</body>276</html>