GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 100px;22    background: #ffffff;23    color: #222;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28  }29  .status-left { display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 600; }30  .status-right { margin-left: auto; display: flex; align-items: center; gap: 18px; color: #444; }31  .status-dot {32    width: 28px; height: 28px; border-radius: 50%; background: #777;33  }34  .status-rect {35    width: 36px; height: 22px; border-radius: 4px; background: #777;36  }37 38  /* App bar */39  .app-bar {40    position: absolute;41    top: 100px;42    left: 0;43    width: 1080px;44    height: 140px;45    background: #ffffff;46    display: flex;47    align-items: center;48    padding: 0 28px;49    box-sizing: border-box;50    border-bottom: 2px solid #ececec;51  }52  .icon-btn {53    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 20px;54  }55  .title-input {56    font-size: 56px;57    color: #222;58    flex: 1;59  }60  .icon {61    width: 44px; height: 44px; fill: #333;62  }63 64  /* Content area */65  .content {66    position: absolute;67    top: 240px; /* status + app bar */68    left: 0;69    width: 1080px;70    height: 1190px;71    background: #ffffff;72    padding: 30px 32px;73    box-sizing: border-box;74  }75  .section-header {76    display: flex;77    align-items: center;78    gap: 14px;79    font-size: 42px;80    color: #2c2c2c;81    font-weight: 700;82    margin-bottom: 22px;83  }84  .chev {85    width: 28px; height: 28px; fill: #666;86  }87 88  .task-card {89    width: 1016px;90    background: #F7F8F9;91    border: 1px solid #E6E7EA;92    border-radius: 26px;93    padding: 28px;94    box-sizing: border-box;95    display: flex;96    align-items: flex-start;97    position: relative;98  }99  .check-circle {100    width: 52px; height: 52px; border: 2px solid #B4B9C2; border-radius: 50%;101    margin-right: 24px;102  }103  .task-text {104    flex: 1;105  }106  .task-title {107    font-size: 44px;108    color: #1f1f1f;109    margin-bottom: 16px;110  }111  .task-meta {112    display: flex;113    align-items: center; gap: 16px;114    font-size: 32px; color: #6a6a6a;115  }116  .flag {117    position: absolute; right: 26px; top: 30px;118    width: 44px; height: 44px; fill: #8A8E96;119  }120  .bell {121    width: 34px; height: 34px; fill: #8A8E96;122  }123 124  /* Keyboard */125  .keyboard {126    position: absolute;127    bottom: 60px; /* leave space for home bar */128    left: 0;129    width: 1080px;130    height: 970px;131    background: #161616;132    box-sizing: border-box;133    padding-top: 16px;134  }135  .kb-suggestions {136    height: 120px;137    display: flex;138    align-items: center;139    gap: 26px;140    padding: 0 26px;141    box-sizing: border-box;142    color: #ddd;143    font-size: 38px;144  }145  .kb-pill {146    color: #e7e2d2;147  }148  .kb-mic {149    margin-left: auto;150    width: 60px; height: 60px; border-radius: 50%; background: #2a2a2a;151    display: flex; align-items: center; justify-content: center;152  }153  .mic {154    width: 32px; height: 32px; fill: #dcdcdc;155  }156  .keys {157    padding: 10px 16px 0 16px;158    box-sizing: border-box;159  }160  .key-row {161    display: flex; justify-content: space-between; margin: 18px 8px;162  }163  .key {164    width: 92px; height: 120px; background: #2a2a2a; color: #f2f2f2;165    border-radius: 18px; display: flex; align-items: center; justify-content: center;166    font-size: 42px; box-shadow: inset 0 0 0 1px #3a3a3a;167  }168  .key.wide { width: 170px; }169  .key.extra-wide { width: 500px; }170  .key.circle {171    width: 120px; height: 120px; background: #E7D29A; color: #1f1f1f; border-radius: 60px; font-weight: 700;172  }173  .key.icon {174    background: #2a2a2a;175  }176  .search-key {177    width: 140px; height: 140px; border-radius: 70px; background: #EFD197; color: #1e1e1e;178    display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px #c9b47a;179  }180  .home-bar {181    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);182    width: 320px; height: 10px; background: #e9e9e9; border-radius: 6px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>9:25</div>193      <div class="status-dot"></div>194      <div class="status-rect"></div>195    </div>196    <div class="status-right">197      <div class="status-dot"></div>198      <div class="status-rect"></div>199      <div class="status-dot"></div>200    </div>201  </div>202 203  <!-- App Bar -->204  <div class="app-bar">205    <div class="icon-btn">206      <svg class="icon" viewBox="0 0 24 24">207        <path d="M15.5 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208      </svg>209    </div>210    <div class="title-input">New Balance hiking shoes</div>211    <div class="icon-btn">212      <svg class="icon" viewBox="0 0 24 24">213        <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>214      </svg>215    </div>216  </div>217 218  <!-- Content -->219  <div class="content">220    <div class="section-header">221      <span>Future</span>222      <svg class="chev" viewBox="0 0 24 24">223        <path d="M6 15l6-6 6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>224      </svg>225    </div>226 227    <div class="task-card">228      <div class="check-circle"></div>229      <div class="task-text">230        <div class="task-title">Buy New Balance Hiking shoes</div>231        <div class="task-meta">232          <span>12-23 07:00 AM</span>233          <svg class="bell" viewBox="0 0 24 24">234            <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z" fill="#8A8E96"/>235          </svg>236        </div>237      </div>238      <svg class="flag" viewBox="0 0 24 24">239        <path d="M6 3v18M6 4h10l-2 3 2 3H6" stroke="#8A8E96" stroke-width="2" fill="none" stroke-linejoin="round"/>240      </svg>241    </div>242  </div>243 244  <!-- Keyboard -->245  <div class="keyboard">246    <div class="kb-suggestions">247      <div class="status-rect" style="width:54px;height:54px;border-radius:12px;background:#2a2a2a;"></div>248      <div class="kb-pill">shoes</div>249      <div class="kb-pill">|</div>250      <div class="kb-pill">Shoes</div>251      <div class="kb-pill">|</div>252      <div class="kb-pill">👟</div>253      <div class="kb-mic">254        <svg class="mic" viewBox="0 0 24 24">255          <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm6-3a6 6 0 0 1-12 0M12 17v4" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"/>256        </svg>257      </div>258    </div>259 260    <div class="keys">261      <!-- Row 1 -->262      <div class="key-row">263        <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>264        <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>265      </div>266      <!-- Row 2 -->267      <div class="key-row" style="padding: 0 36px;">268        <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>269        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>270      </div>271      <!-- Row 3 -->272      <div class="key-row">273        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>274        <div class="key">n</div><div class="key">m</div>275        <div class="key icon">276          <svg viewBox="0 0 24 24" width="34" height="34">277            <path d="M4 19l4-4 4 4M8 7v8M18 7h-8l4 4-4 4h8" stroke="#f2f2f2" stroke-width="2" fill="none" stroke-linecap="round"/>278          </svg>279        </div>280      </div>281      <!-- Row 4 -->282      <div class="key-row" style="align-items:center;">283        <div class="key circle">?123</div>284        <div class="key" style="width:120px;">,</div>285        <div class="key" style="width:120px;">😊</div>286        <div class="key extra-wide"></div>287        <div class="key" style="width:120px;">.</div>288        <div class="search-key">289          <svg viewBox="0 0 24 24" width="34" height="34">290            <path d="M21 21l-5-5M10 17a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" stroke="#1e1e1e" stroke-width="2" fill="none" stroke-linecap="round"/>291          </svg>292        </div>293      </div>294    </div>295  </div>296 297  <div class="home-bar"></div>298 299</div>300</body>301</html>