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>Task details UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #FFFFFF;16    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 88px;25    width: 100%;26    display: flex;27    align-items: center;28    padding: 0 40px;29    color: #E0E0E0;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-spacer { flex: 1; }34  .status-icon {35    width: 32px; height: 32px; margin-left: 18px; opacity: 0.8;36    border-radius: 50%; background: #E0E0E0;37  }38 39  /* Toolbar */40  .toolbar {41    position: absolute;42    top: 88px;43    left: 0;44    right: 0;45    height: 96px;46    display: flex;47    align-items: center;48    padding: 0 40px;49  }50  .icon-btn {51    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;52    border-radius: 16px;53    color: #E0E0E0;54  }55  .toolbar .title {56    margin-left: 18px;57    font-size: 40px;58    font-weight: 600;59    color: #F5F5F5;60  }61  .kebab { margin-left: auto; }62 63  /* Content area */64  .content {65    position: absolute;66    top: 200px;67    left: 40px;68    right: 40px;69    bottom: 160px;70    overflow-y: auto;71  }72 73  /* Task title row */74  .task-row {75    display: flex;76    align-items: center;77    gap: 24px;78    margin-top: 20px;79  }80  .circle {81    width: 56px; height: 56px;82    border-radius: 50%;83    border: 3px solid #89B4F8;84    box-sizing: border-box;85  }86  .task-input {87    font-size: 48px;88    line-height: 56px;89    color: #EDEDED;90    display: flex; align-items: center;91  }92  .caret {93    width: 4px; height: 56px; background: #CF6BFF; margin-left: 8px; border-radius: 2px;94  }95  .subtext {96    margin-top: 16px;97    font-size: 32px;98    color: #B0B0B0;99  }100 101  /* Rows with icons */102  .row {103    display: flex;104    align-items: center;105    gap: 24px;106    margin-top: 42px;107    color: #E0E0E0;108    font-size: 36px;109  }110  .row .label {111    color: #E0E0E0;112    font-size: 36px;113  }114  .row-icon {115    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #E0E0E0;116  }117 118  /* Chips */119  .chips { display: flex; gap: 24px; align-items: center; }120  .chip {121    display: inline-flex; align-items: center; gap: 20px;122    background: #3A3A3A;123    color: #DADADA;124    border-radius: 18px;125    padding: 18px 26px;126    font-size: 32px;127  }128  .chip .x {129    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;130    border-radius: 12px; background: #545454; color: #CFCFCF; font-size: 26px;131  }132 133  /* Alert */134  .alert {135    display: flex; align-items: center; gap: 18px;136    margin-top: 42px;137    color: #FF9DA0;138    font-size: 36px;139  }140  .add-link {141    margin-top: 24px;142    color: #8AB4F8;143    font-size: 36px;144  }145 146  /* Action list */147  .actions { margin-top: 40px; }148  .action-row {149    display: flex; align-items: center; gap: 24px;150    padding: 28px 0;151    font-size: 36px;152    color: #E0E0E0;153  }154 155  /* Floating button */156  .fab {157    position: absolute;158    right: 40px;159    bottom: 220px;160    width: 120px; height: 120px;161    border-radius: 28px;162    background: #0B57D0;163    box-shadow: 0 10px 24px rgba(0,0,0,0.5);164    display: flex; align-items: center; justify-content: center;165  }166 167  /* Home indicator */168  .home-indicator {169    position: absolute;170    bottom: 56px;171    left: 50%;172    transform: translateX(-50%);173    width: 360px; height: 12px;174    border-radius: 6px;175    background: #E0E0E0;176    opacity: 0.7;177  }178 179  /* SVG helper */180  svg { width: 40px; height: 40px; }181  .icon-light { stroke: #E0E0E0; fill: none; stroke-width: 4; }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div>1:37</div>190    <div class="status-spacer"></div>191    <div class="status-icon"></div>192    <div class="status-icon"></div>193    <div class="status-icon"></div>194  </div>195 196  <!-- Toolbar -->197  <div class="toolbar">198    <div class="icon-btn">199      <svg viewBox="0 0 24 24"><path class="icon-light" d="M15 6l-6 6 6 6"/></svg>200    </div>201    <div class="icon-btn">202      <svg viewBox="0 0 24 24">203        <rect class="icon-light" x="4" y="4" width="16" height="16" rx="2"></rect>204        <path class="icon-light" d="M7 12l3 3 7-7"/>205      </svg>206    </div>207    <div class="title">Task details</div>208    <div class="icon-btn kebab">209      <svg viewBox="0 0 24 24">210        <circle cx="12" cy="5" r="2" fill="#E0E0E0"></circle>211        <circle cx="12" cy="12" r="2" fill="#E0E0E0"></circle>212        <circle cx="12" cy="19" r="2" fill="#E0E0E0"></circle>213      </svg>214    </div>215  </div>216 217  <!-- Content -->218  <div class="content">219    <div class="task-row">220      <div class="circle"></div>221      <div class="task-input">222        Driving licence223        <span class="caret"></span>224      </div>225    </div>226    <div class="subtext">Would you like to add more details?</div>227 228    <div class="row" style="margin-top:48px;">229      <div class="row-icon">230        <svg viewBox="0 0 24 24">231          <rect class="icon-light" x="3" y="3" width="18" height="18" rx="3"></rect>232          <path class="icon-light" d="M12 3v18M3 12h18"></path>233        </svg>234      </div>235      <div class="label">Select project</div>236    </div>237 238    <div class="row">239      <div class="row-icon">240        <svg viewBox="0 0 24 24">241          <rect class="icon-light" x="3" y="4" width="18" height="17" rx="3"></rect>242          <path class="icon-light" d="M3 9h18M8 2v4M16 2v4"></path>243        </svg>244      </div>245      <div class="chips">246        <div class="chip">Sun, Jul 30 <span class="x">×</span></div>247        <div class="chip">9:00 AM <span class="x">×</span></div>248      </div>249      <div style="margin-left:auto; color:#888; font-size:36px;">✕</div>250    </div>251 252    <div class="row">253      <div class="row-icon">254        <svg viewBox="0 0 24 24">255          <circle class="icon-light" cx="12" cy="12" r="7"></circle>256          <path class="icon-light" d="M12 5v8l4 2"></path>257        </svg>258      </div>259      <div class="chips">260        <div class="chip">3 hours, 15 mins before</div>261      </div>262      <div style="margin-left:auto; color:#888; font-size:36px;">✕</div>263    </div>264 265    <div class="alert">266      <svg viewBox="0 0 24 24" width="40" height="40">267        <path d="M12 3l10 18H2L12 3z" fill="#FF9DA0"></path>268        <rect x="11" y="9" width="2" height="6" fill="#121212"></rect>269        <rect x="11" y="16.5" width="2" height="2" fill="#121212"></rect>270      </svg>271      <div>Notifications are disabled</div>272    </div>273 274    <div class="add-link">+ Add reminder</div>275 276    <div class="actions">277      <div class="action-row">278        <div class="row-icon">279          <svg viewBox="0 0 24 24">280            <path class="icon-light" d="M5 20l7-5 7 5V4H5z"></path>281            <path class="icon-light" d="M6 9h5"></path>282            <path class="icon-light" d="M6 12h5"></path>283          </svg>284        </div>285        <div>Set priority</div>286      </div>287      <div class="action-row">288        <div class="row-icon">289          <svg viewBox="0 0 24 24">290            <rect class="icon-light" x="4" y="5" width="16" height="14" rx="2"></rect>291            <path class="icon-light" d="M7 9h10M7 13h10"></path>292          </svg>293        </div>294        <div>Add checklist</div>295      </div>296      <div class="action-row">297        <div class="row-icon">298          <svg viewBox="0 0 24 24">299            <path class="icon-light" d="M5 7l6-3 8 6-6 3-8-6z"></path>300            <path class="icon-light" d="M5 7v10l8 6V16"></path>301          </svg>302        </div>303        <div>Assign tags</div>304      </div>305      <div class="action-row">306        <div class="row-icon">307          <svg viewBox="0 0 24 24">308            <rect class="icon-light" x="5" y="3" width="12" height="18" rx="2"></rect>309            <path class="icon-light" d="M9 7h6M9 11h6M9 15h6"></path>310          </svg>311        </div>312        <div>Discard</div>313      </div>314      <div class="action-row">315        <div class="row-icon">316          <svg viewBox="0 0 24 24">317            <circle cx="12" cy="12" r="2" fill="#E0E0E0"></circle>318            <circle cx="6" cy="12" r="2" fill="#E0E0E0"></circle>319            <circle cx="18" cy="12" r="2" fill="#E0E0E0"></circle>320          </svg>321        </div>322        <div>More</div>323      </div>324    </div>325  </div>326 327  <!-- Floating button -->328  <div class="fab">329    <svg viewBox="0 0 24 24">330      <path d="M12 5v9" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"></path>331      <path d="M7 10l5 5 5-5" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"></path>332      <rect x="6" y="18" width="12" height="2" rx="1" fill="#FFFFFF"></rect>333    </svg>334  </div>335 336  <!-- Home indicator -->337  <div class="home-indicator"></div>338 339</div>340</body>341</html>