GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Tasks UI Mock</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: #0f1419;14    font-family: Arial, Helvetica, sans-serif;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: linear-gradient(#0b4772, #0b4772);26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left { font-size: 44px; font-weight: 600; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }39  .status-icon {40    width: 42px; height: 42px;41    border-radius: 50%;42    border: 3px solid rgba(255,255,255,0.9);43    position: relative;44  }45  .battery {46    width: 52px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;47  }48  .battery::after {49    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 110px;56    left: 0;57    width: 1080px;58    height: 170px;59    background: #0b5a8e;60    display: flex;61    align-items: center;62    padding: 0 36px;63    box-sizing: border-box;64    gap: 28px;65  }66  .hamburger {67    width: 72px; height: 72px;68    display: inline-flex; align-items: center; justify-content: center;69  }70  .app-title { font-size: 64px; font-weight: 700; margin-right: auto; }71  .app-actions { display: flex; align-items: center; gap: 36px; }72  .action-ico {73    width: 84px; height: 84px; border-radius: 42px;74    display: inline-flex; align-items: center; justify-content: center;75    border: 3px solid rgba(255,255,255,0.35);76  }77 78  /* Sections & list */79  .content {80    position: absolute;81    top: 280px;82    left: 0;83    width: 1080px;84    height: 1760px;85    overflow: hidden;86    background: #0f1419;87  }88  .section-header {89    height: 84px;90    display: flex; align-items: center;91    padding: 0 36px; box-sizing: border-box;92    font-size: 48px; font-weight: 700;93  }94  .tomorrow { background: #d59b26; color: #fff; }95  .upcoming { background: #78a622; color: #dff1c6; }96 97  .list {98    padding: 10px 0 0 0;99  }100  .task-item {101    padding: 36px;102    box-sizing: border-box;103    border-bottom: 1px solid rgba(255,255,255,0.06);104    position: relative;105    background: rgba(0,0,0,0.6);106  }107  .task-title {108    font-size: 56px; font-weight: 700; color: #eaeaea; margin-bottom: 20px;109  }110  .detail-row {111    display: flex; align-items: center; gap: 22px; color: #9aa4ad; margin-bottom: 14px; font-size: 36px;112  }113  .chevron {114    position: absolute; right: 28px; top: 54px;115    width: 42px; height: 42px;116    display: flex; align-items: center; justify-content: center;117    opacity: 0.7;118  }119 120  /* Floating action button */121  .fab {122    position: absolute;123    right: 44px;124    bottom: 300px;125    width: 140px; height: 140px;126    background: radial-gradient(circle at 30% 30%, #40a1ff, #1976d2);127    border-radius: 50%;128    box-shadow: 0 10px 20px rgba(0,0,0,0.5);129    display: flex; align-items: center; justify-content: center;130    border: 6px solid rgba(255,255,255,0.25);131  }132 133  /* Dialog overlay */134  .overlay {135    position: absolute; left: 0; top: 0; width: 1080px; height: 2400px;136    background: rgba(0,0,0,0.55);137  }138  .dialog {139    position: absolute; left: 50%; top: 55%;140    transform: translate(-50%, -50%);141    width: 860px; border-radius: 8px;142    background: #4a4a4a; color: #fff;143    box-shadow: 0 10px 26px rgba(0,0,0,0.6);144    padding: 48px; box-sizing: border-box;145  }146  .dialog-text { font-size: 48px; font-weight: 600; margin-bottom: 40px; }147  .dialog-actions { display: flex; justify-content: flex-end; gap: 40px; }148  .btn-flat {149    font-size: 40px; font-weight: 700; color: #fff; letter-spacing: 2px;150  }151 152  /* Ad banner placeholder */153  .ad-banner {154    position: absolute;155    left: 0;156    bottom: 160px;157    width: 1080px;158    height: 180px;159    background: #E0E0E0;160    border-top: 1px solid #BDBDBD;161    border-bottom: 1px solid #BDBDBD;162    display: flex; align-items: center; justify-content: center; color: #757575;163    font-size: 40px;164  }165 166  /* Gesture bar */167  .gesture {168    position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);169    width: 260px; height: 14px; background: #d9d9d9; border-radius: 10px; opacity: 0.85;170  }171 172  /* Small inline icon styles */173  .mini-ico { width: 34px; height: 34px; opacity: 0.7; }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status bar -->180  <div class="status-bar">181    <div class="status-left">7:05</div>182    <div class="status-right">183      <div class="status-icon"></div>184      <div class="status-icon"></div>185      <div class="status-icon"></div>186      <div class="dot"></div>187      <svg width="44" height="36" viewBox="0 0 24 24" fill="none"><path d="M2 18h20L14 6l-4 7-3-4-5 9z" fill="#fff"/></svg>188      <div class="battery"></div>189    </div>190  </div>191 192  <!-- App bar -->193  <div class="app-bar">194    <div class="hamburger">195      <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">196        <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>197      </svg>198    </div>199    <div class="app-title">Tasks</div>200    <div class="app-actions">201      <div class="action-ico">202        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">203          <circle cx="12" cy="13" r="7" stroke="#fff"/>204          <path d="M12 10v6M9 13h6" stroke="#fff"/>205          <path d="M7 4l2 2M17 4l-2 2" stroke="#fff"/>206        </svg>207      </div>208      <div class="action-ico">209        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">210          <path d="M9 12l2 2 4-4" stroke="#fff"/>211          <circle cx="12" cy="12" r="8" stroke="#fff"/>212        </svg>213      </div>214      <div class="action-ico">215        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">216          <circle cx="11" cy="11" r="7" />217          <path d="M20 20l-4-4" />218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Content area -->224  <div class="content">225    <div class="section-header tomorrow">Tomorrow</div>226 227    <div class="list">228      <div class="task-item">229        <div class="task-title">Catch Subway</div>230        <div class="detail-row">231          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><circle cx="12" cy="13" r="7"/><path d="M12 10v4l3 1"/></svg>232          <span>08:00 AM</span>233          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M3 12a9 9 0 0 1 9-9"/><path d="M21 12a9 9 0 0 1-9 9"/></svg>234          <span>1 day</span>235        </div>236        <div class="detail-row">237          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M4 6h16v14H4z"/><path d="M4 10h16"/></svg>238          <span>Thu, Sep 28, 2023</span>239        </div>240        <div class="chevron">241          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M9 10l3 3 3-3"/></svg>242        </div>243      </div>244 245      <div class="task-item">246        <div class="task-title">Yoga classes</div>247        <div class="detail-row">248          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><circle cx="12" cy="13" r="7"/><path d="M12 10v4l3 1"/></svg>249          <span>11:00 AM</span>250          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M3 12a9 9 0 0 1 9-9"/><path d="M21 12a9 9 0 0 1-9 9"/></svg>251          <span>1 day</span>252        </div>253        <div class="detail-row">254          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M4 6h16v14H4z"/><path d="M4 10h16"/></svg>255          <span>Thu, Sep 28, 2023</span>256        </div>257        <div class="chevron">258          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M9 10l3 3 3-3"/></svg>259        </div>260      </div>261 262      <div class="task-item">263        <div class="task-title">Renew Peloton and Soul cycle membership</div>264        <div class="detail-row">265          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><circle cx="12" cy="13" r="7"/><path d="M12 10v4l3 1"/></svg>266          <span>05:00 PM</span>267          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M7 12h10"/></svg>268          <span>Once</span>269        </div>270        <div class="detail-row">271          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M4 6h16v14H4z"/><path d="M4 10h16"/></svg>272          <span>Thu, Sep 28, 2023</span>273        </div>274        <div class="chevron">275          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M9 14l3-3 3 3"/></svg>276        </div>277      </div>278 279      <div class="section-header upcoming">Upcoming</div>280 281      <div class="task-item">282        <div class="task-title">Dance performance</div>283        <div class="detail-row">284          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><circle cx="12" cy="13" r="7"/><path d="M12 10v4l3 1"/></svg>285          <span>03:00 PM</span>286          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M7 12h10"/></svg>287          <span>Once</span>288        </div>289        <div class="detail-row">290          <svg class="mini-ico" viewBox="0 0 24 24" fill="none" stroke="#9aa4ad" stroke-width="2"><path d="M4 6h16v14H4z"/><path d="M4 10h16"/></svg>291          <span>Sat, Oct 07, 2023</span>292        </div>293      </div>294    </div>295  </div>296 297  <!-- Floating action button -->298  <div class="fab">299    <svg width="78" height="78" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">300      <circle cx="12" cy="13" r="7" />301      <path d="M12 10v6M9 13h6" />302    </svg>303  </div>304 305  <!-- Overlay dialog -->306  <div class="overlay"></div>307  <div class="dialog">308    <div class="dialog-text">Are you sure to delete this task?</div>309    <div class="dialog-actions">310      <div class="btn-flat">NO</div>311      <div class="btn-flat">YES</div>312    </div>313  </div>314 315  <!-- Ad banner placeholder -->316  <div class="ad-banner">[IMG: Ad Banner]</div>317 318  <!-- Gesture bar -->319  <div class="gesture"></div>320 321</div>322</body>323</html>