GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #0E2F2F; /* deep teal/dark green */14    border-radius: 0;15    box-shadow: none;16    color: #E9F3F1;17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    height: 110px;23    width: 100%;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 34px;29    color: #E9F3F1;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .search-header {37    position: absolute;38    top: 110px;39    left: 0;40    width: 100%;41    height: 140px;42    display: flex;43    align-items: center;44    padding: 0 36px;45    border-bottom: 1px solid rgba(255,255,255,0.08);46    color: #D7ECE5;47  }48  .search-title {49    font-size: 48px;50    font-weight: 500;51    margin-left: 24px;52  }53  .search-actions {54    margin-left: auto;55    display: flex;56    align-items: center;57    gap: 28px;58  }59  .list-container {60    position: absolute;61    top: 280px;62    left: 0;63    width: 100%;64    padding: 0 36px;65  }66  .contact-item {67    display: flex;68    align-items: center;69    gap: 28px;70    padding: 28px 0;71  }72  .avatar {73    width: 96px;74    height: 96px;75    border-radius: 48px;76    background: #8E63DA;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #0E2F2F;81    font-weight: 700;82    font-size: 44px;83  }84  .contact-texts {85    display: flex;86    flex-direction: column;87  }88  .contact-name {89    font-size: 44px;90    font-weight: 700;91    color: #79E0B9; /* mint green */92    line-height: 1.2;93  }94  .contact-sub {95    font-size: 32px;96    color: #9CCBC1;97    margin-top: 6px;98  }99  /* Keyboard mock */100  .keyboard {101    position: absolute;102    bottom: 60px;103    left: 0;104    width: 100%;105    height: 900px;106    background: #1C2324;107    border-top: 1px solid rgba(255,255,255,0.06);108    display: flex;109    flex-direction: column;110  }111  .suggestions {112    height: 90px;113    display: flex;114    align-items: center;115    padding: 0 28px;116    color: #CFE6E0;117    font-size: 34px;118    gap: 24px;119  }120  .suggestions .chip-sep { opacity: 0.6; }121  .keys {122    flex: 1;123    padding: 18px 22px;124    display: flex;125    flex-direction: column;126    gap: 22px;127  }128  .row {129    display: flex;130    justify-content: space-between;131    gap: 14px;132  }133  .key {134    height: 120px;135    min-width: 92px;136    background: #2A3234;137    border-radius: 16px;138    color: #E6ECEA;139    font-size: 42px;140    display: flex;141    align-items: center;142    justify-content: center;143  }144  .key.small { min-width: 120px; }145  .key.wide { flex: 1; }146  .key.circle {147    height: 120px;148    width: 120px;149    border-radius: 60px;150    background: #A6EBCF;151    color: #0E2F2F;152    font-weight: 700;153  }154  .bottom-bar {155    position: absolute;156    bottom: 16px;157    left: 50%;158    transform: translateX(-50%);159    width: 400px;160    height: 8px;161    border-radius: 4px;162    background: rgba(255,255,255,0.85);163  }164  svg { display: block; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-left">9:56</div>173    <div class="status-right">174      <!-- simple icons -->175      <svg width="40" height="40" viewBox="0 0 24 24">176        <!-- location/services glyphs (four dots) -->177        <circle cx="4" cy="12" r="2" fill="#E9F3F1"></circle>178        <circle cx="10" cy="12" r="2" fill="#E9F3F1"></circle>179        <circle cx="16" cy="12" r="2" fill="#E9F3F1"></circle>180        <circle cx="22" cy="12" r="2" fill="#E9F3F1"></circle>181      </svg>182      <!-- WiFi -->183      <svg width="40" height="40" viewBox="0 0 24 24">184        <path d="M2 9c5-4 15-4 20 0" stroke="#E9F3F1" stroke-width="2" fill="none" stroke-linecap="round"/>185        <path d="M5 12c4-3 10-3 14 0" stroke="#E9F3F1" stroke-width="2" fill="none" stroke-linecap="round"/>186        <path d="M9 16c3-2 5-2 8 0" stroke="#E9F3F1" stroke-width="2" fill="none" stroke-linecap="round"/>187        <circle cx="12" cy="19" r="2" fill="#E9F3F1"/>188      </svg>189      <!-- Battery with percentage -->190      <svg width="50" height="40" viewBox="0 0 28 16">191        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#E9F3F1" stroke-width="2" fill="none"/>192        <rect x="3" y="5" width="18" height="6" fill="#E9F3F1"/>193        <rect x="24" y="6" width="3" height="4" fill="#E9F3F1"/>194      </svg>195      <div style="font-size:32px;">100%</div>196    </div>197  </div>198 199  <!-- Search header -->200  <div class="search-header">201    <!-- back arrow -->202    <svg width="56" height="56" viewBox="0 0 24 24">203      <path d="M15 6L9 12l6 6" stroke="#E9F3F1" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204    </svg>205    <div class="search-title">Clara Wagner</div>206    <div class="search-actions">207      <!-- clear X -->208      <svg width="44" height="44" viewBox="0 0 24 24">209        <path d="M6 6L18 18M18 6L6 18" stroke="#E9F3F1" stroke-width="2.5" stroke-linecap="round"/>210      </svg>211      <!-- mic -->212      <svg width="44" height="44" viewBox="0 0 24 24">213        <path d="M12 5a4 4 0 0 1 4 4v5a4 4 0 0 1-8 0V9a4 4 0 0 1 4-4z" fill="none" stroke="#E9F3F1" stroke-width="2"/>214        <path d="M5 12a7 7 0 0 0 14 0" fill="none" stroke="#E9F3F1" stroke-width="2" stroke-linecap="round"/>215        <path d="M12 19v4" stroke="#E9F3F1" stroke-width="2" stroke-linecap="round"/>216      </svg>217    </div>218  </div>219 220  <!-- Result list -->221  <div class="list-container">222    <div class="contact-item">223      <div class="avatar">C</div>224      <div class="contact-texts">225        <div class="contact-name">Clara Wagner</div>226        <div class="contact-sub">Clara Wagner</div>227      </div>228    </div>229  </div>230 231  <!-- Keyboard mock -->232  <div class="keyboard">233    <div class="suggestions">234      <!-- small grid icon -->235      <svg width="44" height="44" viewBox="0 0 24 24">236        <rect x="3" y="3" width="6" height="6" fill="#CFE6E0"/>237        <rect x="13" y="3" width="8" height="6" fill="#CFE6E0"/>238        <rect x="3" y="13" width="8" height="8" fill="#CFE6E0"/>239        <rect x="13" y="13" width="8" height="8" fill="#CFE6E0"/>240      </svg>241      <div>Wagner</div>242      <div class="chip-sep">|</div>243      <div>Wagner's</div>244    </div>245    <div class="keys">246      <div class="row">247        <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>248        <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>249      </div>250      <div class="row">251        <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>252        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>253      </div>254      <div class="row">255        <div class="key small">shift</div>256        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>257        <div class="key">b</div><div class="key">n</div><div class="key">m</div>258        <div class="key small">259          <!-- backspace -->260          <svg width="40" height="40" viewBox="0 0 24 24">261            <path d="M4 12l5-5h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-5-5z" fill="none" stroke="#E6ECEA" stroke-width="2"/>262            <path d="M12 9l4 4M16 9l-4 4" stroke="#E6ECEA" stroke-width="2" stroke-linecap="round"/>263          </svg>264        </div>265      </div>266      <div class="row">267        <div class="key circle">?123</div>268        <div class="key small">,</div>269        <div class="key wide"></div>270        <div class="key small">.</div>271        <div class="key circle">272          <!-- search icon -->273          <svg width="40" height="40" viewBox="0 0 24 24">274            <circle cx="10" cy="10" r="6" stroke="#0E2F2F" stroke-width="2" fill="none"/>275            <path d="M15 15l5 5" stroke="#0E2F2F" stroke-width="2" stroke-linecap="round"/>276          </svg>277        </div>278      </div>279    </div>280  </div>281 282  <div class="bottom-bar"></div>283</div>284</body>285</html>