GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #303030; border-radius: 0; box-shadow: none;11    color: #fff;12  }13 14  /* Top status bar */15  .status-bar {16    height: 120px;17    background: #4c86f5;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; box-sizing: border-box; color: #fff;20    font-size: 42px; letter-spacing: 0.5px;21  }22  .status-icons { display: flex; align-items: center; gap: 28px; }23  .status-icons svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; }24 25  /* App bar / search */26  .app-bar {27    height: 150px;28    background: #5fa2f9;29    display: flex; align-items: center; justify-content: space-between;30    padding: 0 32px; box-sizing: border-box;31  }32  .app-left { display: flex; align-items: center; gap: 26px; }33  .app-left .back svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 6; fill: none; }34  .search-title {35    font-size: 48px; font-weight: 500; color: #fff; line-height: 1;36    padding-top: 8px;37  }38  .search-underline {39    width: 640px; height: 6px; background: rgba(255,255,255,0.4);40    margin-top: 20px;41  }42  .app-actions { display: flex; align-items: center; gap: 36px; }43  .action-circle {44    width: 86px; height: 86px; border-radius: 50%;45    border: 3px solid rgba(255,255,255,0.9);46    display: flex; align-items: center; justify-content: center;47  }48  .action-circle svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 5; fill: none; }49 50  /* Sections */51  .section-header {52    height: 94px; display: flex; align-items: center;53    padding: 0 28px; box-sizing: border-box; font-size: 44px; font-weight: 600; color: #fff;54  }55  .hdr-overdue { background: #e74c3c; }56  .hdr-today { background: #ef5350; }57  .hdr-tomorrow { background: #f1c40f; color: #343434; font-weight: 700; }58  .hdr-next { background: #5ca8ff; }59  .hdr-upcoming { background: #8bc34a; color: #163012; font-weight: 700; }60 61  /* Cards */62  .card {63    background: #3a3a3a; margin-bottom: 22px; padding: 26px 28px; box-sizing: border-box;64    position: relative;65  }66  .card-title {67    font-size: 48px; font-weight: 500; color: #f5f5f5; margin-bottom: 26px;68  }69  .chevron {70    position: absolute; right: 26px; top: 30px;71  }72  .chevron svg { width: 48px; height: 48px; stroke: #bdbdbd; stroke-width: 6; fill: none; }73  .row { display: flex; align-items: center; gap: 18px; color: #cfcfcf; margin: 12px 0; }74  .row .label { font-size: 34px; }75  .row .muted { color: #bdbdbd; font-size: 34px; }76  .row svg { width: 40px; height: 40px; stroke: #bdbdbd; stroke-width: 4; fill: none; }77  .missed {78    position: absolute; right: 28px; bottom: 26px; color: #ff6b6b; font-size: 34px;79  }80 81  /* Floating action button */82  .fab {83    position: absolute; right: 48px; bottom: 330px;84    width: 144px; height: 144px; border-radius: 50%;85    background: linear-gradient(180deg, #66a8ff 0%, #4f8ef7 100%);86    box-shadow: 0 10px 24px rgba(0,0,0,0.35);87    display: flex; align-items: center; justify-content: center;88  }89  .fab svg { width: 84px; height: 84px; stroke: #fff; stroke-width: 6; fill: none; }90 91  /* Ad banner */92  .ad-banner {93    position: absolute; left: 0; bottom: 110px;94    width: 1080px; height: 180px; background: #E0E0E0;95    border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;97  }98 99  /* Bottom navigation pill */100  .home-pill {101    position: absolute; left: 50%; transform: translateX(-50%);102    bottom: 36px; width: 260px; height: 18px; background: #e5e5e5; border-radius: 12px;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status bar -->110  <div class="status-bar">111    <div>9:11</div>112    <div class="status-icons">113      <!-- simple icons -->114      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><circle cx="12" cy="12" r="4"></circle></svg>115      <svg viewBox="0 0 24 24"><path d="M2 8c6-6 14-6 20 0v8c-6 6-14 6-20 0V8z"></path><circle cx="19" cy="19" r="2" fill="#fff" stroke="none"></circle></svg>116      <svg viewBox="0 0 24 24"><path d="M7 20h10"></path><path d="M7 14h10"></path><path d="M7 4h10"></path></svg>117    </div>118  </div>119 120  <!-- App bar / search -->121  <div class="app-bar">122    <div class="app-left">123      <div class="back">124        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg>125      </div>126      <div>127        <div class="search-title">Find Tasks</div>128        <div class="search-underline"></div>129      </div>130    </div>131    <div class="app-actions">132      <div class="action-circle">133        <!-- alarm plus -->134        <svg viewBox="0 0 24 24">135          <circle cx="12" cy="13" r="7"></circle>136          <path d="M5 4l3 2"></path><path d="M19 4l-3 2"></path>137          <path d="M12 10v6"></path><path d="M9 13h6"></path>138        </svg>139      </div>140      <div class="action-circle">141        <!-- check icon -->142        <svg viewBox="0 0 24 24">143          <circle cx="12" cy="12" r="9"></circle>144          <path d="M7 12l3 3 7-7"></path>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- Overdue -->151  <div class="section-header hdr-overdue">Overdue</div>152  <div class="card">153    <div class="card-title">Call Janet</div>154    <div class="chevron">155      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>156    </div>157    <div class="row">158      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>159      <div class="label">03:30 PM</div>160      <svg viewBox="0 0 24 24"><path d="M3 12c0-5 4-9 9-9"></path><path d="M21 12c0 5-4 9-9 9"></path></svg>161      <div class="muted">S</div>162    </div>163    <div class="row">164      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>165      <div class="label">Sun, Sep 03, 2023</div>166    </div>167    <div class="missed">(Missed)</div>168  </div>169 170  <!-- Today -->171  <div class="section-header hdr-today">Today</div>172  <div class="card">173    <div class="card-title">Yoga classes</div>174    <div class="chevron">175      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>176    </div>177    <div class="row">178      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>179      <div class="label">11:00 AM</div>180      <div class="muted">1 day</div>181    </div>182    <div class="row">183      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>184      <div class="label">Thu, Aug 31, 2023</div>185    </div>186  </div>187 188  <!-- Tomorrow -->189  <div class="section-header hdr-tomorrow">Tomorrow</div>190  <div class="card">191    <div class="card-title">Catch Subway</div>192    <div class="chevron">193      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>194    </div>195    <div class="row">196      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>197      <div class="label">08:00 AM</div>198      <div class="muted">1 day</div>199    </div>200    <div class="row">201      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>202      <div class="label">Fri, Sep 01, 2023</div>203    </div>204  </div>205 206  <!-- Next 7 days -->207  <div class="section-header hdr-next">Next 7 days</div>208  <div class="card">209    <div class="card-title">Visit Mom at Arizona</div>210    <div class="chevron">211      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>212    </div>213    <div class="row">214      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>215      <div class="label">11:30 AM</div>216      <div class="muted">Once</div>217    </div>218    <div class="row">219      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>220      <div class="label">Sat, Sep 02, 2023</div>221    </div>222  </div>223 224  <div class="card">225    <div class="card-title">Call Mom</div>226    <div class="chevron">227      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>228    </div>229    <div class="row">230      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>231      <div class="label">02:00 PM</div>232      <div class="muted">S</div>233    </div>234    <div class="row">235      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>236      <div class="label">Sun, Sep 03, 2023</div>237    </div>238  </div>239 240  <!-- Upcoming -->241  <div class="section-header hdr-upcoming">Upcoming</div>242  <div class="card">243    <div class="card-title">Lunch with Janet</div>244    <div class="chevron">245      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>246    </div>247    <div class="row">248      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v6l4 2"></path></svg>249      <div class="label">02:30 AM</div>250      <div class="muted">Once</div>251    </div>252    <div class="row">253      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2"></rect><path d="M7 6v-2"></path><path d="M17 6v-2"></path></svg>254      <div class="label">Sat, Sep 09, 2023</div>255    </div>256  </div>257 258  <!-- Floating action button -->259  <div class="fab">260    <svg viewBox="0 0 24 24">261      <circle cx="12" cy="13" r="7"></circle>262      <path d="M5 4l3 2"></path><path d="M19 4l-3 2"></path>263      <path d="M12 10v6"></path><path d="M9 13h6"></path>264    </svg>265  </div>266 267  <!-- Ad banner placeholder -->268  <div class="ad-banner">[IMG: Ad banner]</div>269 270  <!-- Bottom home bar -->271  <div class="home-pill"></div>272</div>273</body>274</html>