GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>New Task UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #101010;14    font-family: Roboto, Arial, Helvetica, sans-serif;15    color: #EDEDED;16  }17 18  /* Status + App bar */19  .top-chrome {20    position: absolute;21    left: 0; top: 0;22    width: 100%;23    height: 220px;24    background: #323232;25  }26  .status-bar {27    height: 96px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    font-size: 40px;33    color: #EDEDED;34    letter-spacing: 1px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 22px;40    opacity: .95;41  }42  .app-bar {43    height: 124px;44    display: flex;45    align-items: center;46    padding: 0 32px;47    gap: 24px;48  }49  .title {50    font-size: 68px;51    font-weight: 700;52    color: #FFFFFF;53    letter-spacing: 0.5px;54  }55  .icon {56    width: 58px; height: 58px;57    display: inline-flex;58    align-items: center; justify-content: center;59    color: #FFFFFF;60  }61  .icon svg { width: 100%; height: 100%; fill: currentColor; }62 63  /* Content area */64  .content {65    position: absolute;66    left: 0; right: 0;67    top: 220px;68    bottom: 780px; /* leave room above keyboard */69    padding: 28px 22px 120px 22px;70    overflow: hidden;71  }72 73  .field {74    position: relative;75    width: 100%;76    height: 230px;77    border: 3px solid #F0B43A;78    border-radius: 18px;79    background: #0F0F0F;80    box-sizing: border-box;81  }82  .label-floating {83    position: absolute;84    top: -22px; left: 24px;85    background: #101010;86    padding: 0 14px;87    color: #F0B43A;88    font-size: 40px;89    font-weight: 600;90    letter-spacing: .3px;91  }92 93  .section {94    margin-top: 42px;95  }96  .section-title {97    color: #F0B43A;98    font-size: 44px;99    font-weight: 800;100    display: flex;101    align-items: center;102    justify-content: space-between;103    padding: 6px 6px 18px 6px;104  }105  .caret-up {106    width: 34px; height: 34px; color: #C2C2C2;107  }108  .caret-up svg { width: 100%; height: 100%; fill: currentColor; }109 110  .priority-buttons {111    display: flex;112    gap: 24px;113  }114  .pill {115    flex: 1;116    background: #1F1F1F;117    border-radius: 26px;118    padding: 30px 0;119    text-align: center;120    font-size: 44px;121    color: #EAEAEA;122  }123 124  .row-item {125    display: flex;126    align-items: center;127    gap: 24px;128    padding: 22px 10px;129    color: #D9D9D9;130    font-size: 44px;131  }132  .row-item .mini-ico {133    width: 58px; height: 58px; color: #D9D9D9;134  }135  .row-item .mini-ico svg { width: 100%; height: 100%; fill: currentColor; }136 137  /* Floating action button */138  .fab {139    position: absolute;140    right: 44px;141    bottom: 860px;142    width: 150px; height: 150px;143    background: #F6C35B;144    border: none;145    border-radius: 50%;146    box-shadow: 0 10px 24px rgba(0,0,0,.4);147    display: flex;148    align-items: center;149    justify-content: center;150    cursor: default;151  }152  .fab svg { width: 78px; height: 78px; fill: #1A1A1A; }153 154  /* Keyboard mock */155  .keyboard {156    position: absolute;157    left: 0; bottom: 0;158    width: 100%; height: 780px;159    background: #1B1B1B;160    border-top: 1px solid #2C2C2C;161    box-shadow: 0 -8px 24px rgba(0,0,0,.45) inset;162    padding: 26px 18px;163    box-sizing: border-box;164  }165  .kb-top-strip {166    height: 96px;167    display: flex;168    align-items: center;169    gap: 20px;170    color: #CFCFCF;171  }172  .kb-chip {173    width: 88px; height: 72px;174    background: #2A2A2A;175    border-radius: 14px;176  }177  .kb-rows {178    margin-top: 10px;179  }180  .kb-row {181    display: grid;182    grid-template-columns: repeat(10, 1fr);183    gap: 12px;184    margin: 12px 0;185  }186  .kb-row.mid { grid-template-columns: repeat(9, 1fr); padding: 0 46px; }187  .kb-row.low { grid-template-columns: repeat(7, 1fr); padding: 0 128px; }188 189  .key {190    height: 120px;191    background: #262626;192    border-radius: 16px;193    color: #F3F3F3;194    display: flex; align-items: center; justify-content: center;195    font-size: 46px;196  }197 198  .kb-bottom {199    display: grid;200    grid-template-columns: 140px 140px 1fr 140px 140px;201    gap: 14px;202    margin-top: 16px;203  }204  .key.small { font-size: 38px; }205  .space { background: #262626; height: 120px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #CFCFCF; font-size: 38px; }206 207  /* Subtle divider look-alikes inside content */208  .muted { color: #BEBEBE; }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Top chrome (status + app bar) -->215  <div class="top-chrome">216    <div class="status-bar">217      <div>10:15</div>218      <div class="status-icons">219        <span>🔔</span>220        <span>▶️</span>221        <span>88°</span>222        <span>▲</span>223        <span>•</span>224      </div>225      <div class="status-icons">226        <span>📶</span>227        <span>🔋</span>228      </div>229    </div>230    <div class="app-bar">231      <div class="icon">232        <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>233      </div>234      <div class="title">New Task</div>235    </div>236  </div>237 238  <!-- Main content -->239  <div class="content">240    <!-- Floating input field -->241    <div class="field">242      <div class="label-floating">What needs to be done?</div>243    </div>244 245    <!-- Priority -->246    <div class="section">247      <div class="section-title">248        <span>Priority</span>249        <span class="caret-up"><svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg></span>250      </div>251      <div class="priority-buttons">252        <div class="pill">Low</div>253        <div class="pill">Medium</div>254        <div class="pill">High</div>255      </div>256    </div>257 258    <!-- Subtasks -->259    <div class="section">260      <div class="section-title">Subtasks</div>261      <div class="row-item">262        <div class="mini-ico">263          <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2z"/></svg>264        </div>265        <div class="muted">Add subtask</div>266      </div>267    </div>268 269    <!-- Due date -->270    <div class="section">271      <div class="section-title">Due date</div>272 273      <div class="row-item">274        <div class="mini-ico">275          <svg viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 17H5V9h14v12z"/></svg>276        </div>277        <div class="muted">Set due date</div>278      </div>279 280      <div class="row-item">281        <div class="mini-ico">282          <svg viewBox="0 0 24 24"><path d="M12 1a11 11 0 100 22 11 11 0 000-22zm1 11.1l4.3 2.6-1 1.6L11 13V6h2v6.1z"/></svg>283        </div>284        <div class="muted">Set time</div>285      </div>286    </div>287 288    <!-- Reminder -->289    <div class="section">290      <div class="section-title">Reminder</div>291      <div class="row-item">292        <div class="mini-ico">293          <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>294        </div>295        <div class="muted">Set reminder</div>296      </div>297    </div>298  </div>299 300  <!-- Floating action button -->301  <button class="fab" aria-label="Save Task">302    <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>303  </button>304 305  <!-- Keyboard mock -->306  <div class="keyboard">307    <div class="kb-top-strip">308      <div class="kb-chip"></div>309      <div class="kb-chip"></div>310      <div class="kb-chip"></div>311      <div class="kb-chip"></div>312      <div class="kb-chip"></div>313    </div>314    <div class="kb-rows">315      <div class="kb-row">316        <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><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>317      </div>318      <div class="kb-row mid">319        <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><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>320      </div>321      <div class="kb-row low">322        <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><div class="key">N</div><div class="key">M</div>323      </div>324      <div class="kb-bottom">325        <div class="key small">?123</div>326        <div class="key small">,</div>327        <div class="space">Space</div>328        <div class="key small">.</div>329        <div class="key small">🎤</div>330      </div>331    </div>332  </div>333 334</div>335</body>336</html>