GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>New Task UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #121212; color: #FFFFFF;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0;16    width: 1080px; height: 140px;17    background: #2f2f2f;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; box-sizing: border-box;20    font-weight: 600; font-size: 42px; letter-spacing: 1px;21  }22  .status-right { display: flex; align-items: center; gap: 28px; }23  .status-icon { width: 40px; height: 40px; background: #bdbdbd; border-radius: 8px; }24 25  /* Header */26  .header {27    position: absolute; top: 140px; left: 0;28    width: 1080px; height: 140px;29    padding: 0 40px; box-sizing: border-box;30    display: flex; align-items: center; gap: 24px;31    background: transparent;32  }33  .back-btn {34    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;35  }36  .title { font-size: 72px; font-weight: 700; }37 38  /* Content area */39  .content {40    position: absolute; top: 300px; left: 0; right: 0;41    padding: 0 40px 40px; box-sizing: border-box;42  }43  .label {44    color: #FFC95A; font-size: 40px; margin: 12px 0 18px;45  }46  .input {47    border: 3px solid #FFC95A; border-radius: 16px;48    height: 180px; box-sizing: border-box;49    padding: 32px; font-size: 52px; line-height: 1.2;50    color: #fff; background: #1a1a1a;51  }52 53  .section-title {54    margin-top: 52px; margin-bottom: 18px;55    font-size: 46px; color: #FFC95A; display: flex; align-items: center; justify-content: space-between;56  }57  .chevron-up {58    width: 32px; height: 32px; border-right: 6px solid #FFC95A; border-top: 6px solid #FFC95A;59    transform: rotate(-45deg); margin-right: 8px;60  }61 62  /* Priority chips */63  .chip-row {64    display: flex; gap: 24px;65    background: #1c1c1c; padding: 16px; border-radius: 24px;66  }67  .chip {68    flex: 1; background: #232323; color: #fff;69    text-align: center; padding: 34px 0; font-size: 48px; border-radius: 18px;70  }71 72  /* List rows */73  .list-row {74    display: flex; align-items: center; gap: 26px;75    padding: 32px 0; font-size: 50px; color: #eaeaea;76    border-bottom: 1px solid #303030;77  }78  .icon-circle {79    width: 68px; height: 68px; border-radius: 16px; background: #303030;80    display: flex; align-items: center; justify-content: center;81  }82  .plus-bar { width: 36px; height: 6px; background: #FFC95A; position: relative; }83  .plus-bar::after { content: ""; position: absolute; left: 15px; top: -15px; width: 6px; height: 36px; background: #FFC95A; }84 85  /* Floating action button */86  .fab {87    position: absolute; right: 40px; top: 1480px;88    width: 140px; height: 140px; border-radius: 50%;89    background: #FFC95A; box-shadow: 0 12px 24px rgba(0,0,0,0.5);90    display: flex; align-items: center; justify-content: center;91  }92 93  /* Keyboard mock */94  .keyboard {95    position: absolute; bottom: 0; left: 0; width: 1080px; height: 860px;96    background: #1f1f1f; border-top: 1px solid #333;97    box-sizing: border-box;98  }99  .kb-suggestions {100    height: 120px; display: flex; align-items: center; gap: 40px;101    padding: 0 40px; box-sizing: border-box; color: #ddd; font-size: 42px;102    border-bottom: 1px solid #333;103  }104  .kb-suggest-pill {105    padding: 12px 24px; background: #2a2a2a; border-radius: 28px;106  }107  .kb-rows { padding: 24px 30px; box-sizing: border-box; }108  .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; margin-bottom: 26px; }109  .key {110    height: 100px; background: #2b2b2b; border-radius: 18px; color: #e0e0e0;111    display: flex; align-items: center; justify-content: center; font-size: 42px;112    border: 1px solid #3a3a3a;113  }114  .key.wide { grid-column: span 3; }115  .space { grid-column: span 5; }116  .kb-bottom {117    position: absolute; right: 24px; bottom: 24px;118    width: 140px; height: 140px; border-radius: 50%; background: #FFD78A;119    display: flex; align-items: center; justify-content: center;120  }121 122  /* Simple check mark */123  .check {124    width: 64px; height: 64px; border: 8px solid #1a1a1a; border-top: none; border-left: none;125    transform: rotate(45deg);126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status Bar -->133  <div class="status-bar">134    <div>10:16</div>135    <div class="status-right">136      <div class="status-icon" title="Location"></div>137      <div class="status-icon" title="Weather"></div>138      <div class="status-icon" title="Alert"></div>139      <div class="status-icon" title="WiFi"></div>140      <div class="status-icon" title="Battery"></div>141    </div>142  </div>143 144  <!-- Header -->145  <div class="header">146    <div class="back-btn">147      <!-- Back Arrow -->148      <svg width="72" height="72" viewBox="0 0 24 24">149        <path d="M15 4 L5 12 L15 20" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>150      </svg>151    </div>152    <div class="title">New Task</div>153  </div>154 155  <!-- Content -->156  <div class="content">157    <div class="label">What needs to be done?</div>158    <div class="input">Buy New Balance Hiking shoes</div>159 160    <div class="section-title">161      <span>Priority</span>162      <span class="chevron-up"></span>163    </div>164    <div class="chip-row">165      <div class="chip">Low</div>166      <div class="chip">Medium</div>167      <div class="chip">High</div>168    </div>169 170    <div class="section-title" style="margin-top: 44px;">Subtasks</div>171    <div class="list-row">172      <div class="icon-circle">173        <div class="plus-bar"></div>174      </div>175      <div>Add subtask</div>176    </div>177 178    <div class="section-title">Due date</div>179    <div class="list-row">180      <div class="icon-circle">181        <!-- Calendar icon -->182        <svg width="42" height="42" viewBox="0 0 24 24">183          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#FFC95A" fill="none" stroke-width="2"/>184          <line x1="3" y1="9" x2="21" y2="9" stroke="#FFC95A" stroke-width="2"/>185          <line x1="8" y1="3" x2="8" y2="7" stroke="#FFC95A" stroke-width="2"/>186          <line x1="16" y1="3" x2="16" y2="7" stroke="#FFC95A" stroke-width="2"/>187        </svg>188      </div>189      <div>Set due date</div>190    </div>191    <div class="list-row">192      <div class="icon-circle">193        <!-- Clock icon -->194        <svg width="42" height="42" viewBox="0 0 24 24">195          <circle cx="12" cy="12" r="9" stroke="#FFC95A" fill="none" stroke-width="2"/>196          <line x1="12" y1="12" x2="12" y2="6" stroke="#FFC95A" stroke-width="2" stroke-linecap="round"/>197          <line x1="12" y1="12" x2="17" y2="14" stroke="#FFC95A" stroke-width="2" stroke-linecap="round"/>198        </svg>199      </div>200      <div>Set time</div>201    </div>202 203    <div class="section-title">Reminder</div>204    <div class="list-row" style="border-bottom: none;">205      <div class="icon-circle">206        <!-- Bell icon -->207        <svg width="42" height="42" viewBox="0 0 24 24">208          <path d="M12 3 C8 3 7 6 7 8 V12 L5 14 V15 H19 V14 L17 12 V8 C17 6 16 3 12 3 Z" stroke="#FFC95A" fill="none" stroke-width="2"/>209          <circle cx="12" cy="19" r="2" fill="#FFC95A"/>210        </svg>211      </div>212      <div>Set reminder</div>213    </div>214  </div>215 216  <!-- Floating Action Button -->217  <div class="fab">218    <div class="check"></div>219  </div>220 221  <!-- Keyboard Mock -->222  <div class="keyboard">223    <div class="kb-suggestions">224      <div class="kb-suggest-pill">shoes</div>225      <div class="kb-suggest-pill">Shoes</div>226      <div class="kb-suggest-pill">👟</div>227      <div class="kb-suggest-pill">🎙️</div>228    </div>229    <div class="kb-rows">230      <div class="kb-row">231        <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>232        <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>233      </div>234      <div class="kb-row">235        <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>236        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>237      </div>238      <div class="kb-row">239        <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>240        <div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key">⏎</div>241      </div>242      <div class="kb-row">243        <div class="key wide">?123</div>244        <div class="key">🙂</div>245        <div class="key space">Space</div>246        <div class="key">.</div>247        <div class="key wide">✔</div>248      </div>249    </div>250    <div class="kb-bottom">251      <div class="check"></div>252    </div>253  </div>254 255</div>256</body>257</html>