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>Lists UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    height: 120px;20    padding: 40px;21    display: flex;22    align-items: flex-start;23    justify-content: space-between;24    color: #222;25  }26  .status-left { font-size: 36px; font-weight: 600; }27  .status-right { display: flex; align-items: center; gap: 16px; color: #444; font-size: 30px; }28  .status-icon svg { width: 38px; height: 38px; }29 30  /* Search */31  .search-wrap { padding: 0 40px; }32  .search {33    height: 96px;34    border-radius: 48px;35    background: #F3F3F4;36    border: 1px solid #E6E6E7;37    display: flex;38    align-items: center;39    padding: 0 30px;40    gap: 20px;41    color: #A9A9AC;42    font-size: 36px;43  }44  .search svg { width: 40px; height: 40px; }45 46  /* Promo card */47  .promo {48    margin: 30px 40px 8px;49    background: #fff;50    border: 1px solid #ECECEC;51    border-radius: 28px;52    box-shadow: 0 18px 40px rgba(0,0,0,0.06);53    padding: 28px;54    display: flex;55    gap: 24px;56    align-items: center;57  }58  .promo .text { flex: 1; }59  .promo .title { font-size: 42px; color: #222; font-weight: 600; line-height: 1.25; margin-bottom: 26px; }60  .promo .btn {61    display: inline-block;62    background: #2F7CFB;63    color: #fff;64    padding: 18px 26px;65    border-radius: 30px;66    font-size: 32px;67    font-weight: 600;68  }69  .promo .img {70    width: 290px;71    height: 180px;72    background: #E0E0E0;73    border: 1px solid #BDBDBD;74    border-radius: 18px;75    display: flex;76    align-items: center;77    justify-content: center;78    color: #757575;79    text-align: center;80    font-size: 28px;81    padding: 10px;82  }83 84  /* Section heading */85  .section-title {86    padding: 18px 40px 6px;87    font-size: 58px;88    font-weight: 800;89    color: #111;90  }91 92  /* Grid of tiles */93  .grid {94    padding: 10px 40px 0;95    display: flex;96    flex-wrap: wrap;97    gap: 40px;98  }99  .tile {100    width: 480px;101    height: 250px;102    background: #fff;103    border: 1px solid #ECECEC;104    border-radius: 26px;105    box-shadow: 0 18px 40px rgba(0,0,0,0.05);106    display: flex;107    align-items: center;108    justify-content: center;109    color: #1a1a1a;110    font-size: 42px;111    font-weight: 500;112    position: relative;113  }114  .tile .small-icon {115    position: absolute;116    right: 28px;117    bottom: 24px;118    color: #8A8D92;119  }120  .tile .plus {121    color: #2F7CFB;122    font-size: 82px;123    line-height: 1;124  }125 126  /* Subsection with pill */127  .sub-head {128    padding: 36px 40px 6px;129    display: flex;130    align-items: center;131    gap: 18px;132  }133  .sub-head .label {134    font-size: 56px;135    font-weight: 800;136    color: #0f0f0f;137    letter-spacing: 0.2px;138  }139  .pill {140    background: #2F7CFB;141    color: #fff;142    padding: 12px 20px;143    border-radius: 20px;144    font-size: 28px;145    font-weight: 700;146  }147 148  /* Bottom nav */149  .bottom-nav {150    position: absolute;151    left: 40px;152    right: 40px;153    bottom: 130px;154    height: 150px;155    background: #ffffff;156    border: 1px solid #ECECEC;157    border-radius: 80px;158    box-shadow: 0 18px 40px rgba(0,0,0,0.08);159    display: flex;160    align-items: center;161    justify-content: space-around;162    padding: 0 20px;163  }164  .nav-item {165    display: flex;166    flex-direction: column;167    align-items: center;168    gap: 10px;169    color: #2F7CFB;170    font-size: 32px;171    font-weight: 600;172  }173  .nav-item svg { width: 54px; height: 54px; }174 175  /* Utility icon colors */176  .icon-gray { stroke: #9A9A9D; }177  .icon-blue { stroke: #2F7CFB; fill: none; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="statusbar">185    <div class="status-left">8:52</div>186    <div class="status-right">187      <span class="status-icon">188        <!-- simple network icon -->189        <svg viewBox="0 0 24 24">190          <path d="M3 17c4-4 14-4 18 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>191          <path d="M6 14c3-3 9-3 12 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>192          <circle cx="12" cy="18" r="1.5" fill="#555"/>193        </svg>194      </span>195      <span class="status-icon">196        <!-- battery icon -->197        <svg viewBox="0 0 28 20">198          <rect x="1" y="3" width="22" height="14" rx="3" stroke="#555" stroke-width="2" fill="none"/>199          <rect x="3" y="5" width="15" height="10" fill="#555"/>200          <rect x="23" y="7" width="4" height="6" rx="1" fill="#555"/>201        </svg>202      </span>203      <span style="font-weight:600;">100%</span>204    </div>205  </div>206 207  <!-- Search -->208  <div class="search-wrap">209    <div class="search">210      <svg viewBox="0 0 24 24">211        <circle cx="11" cy="11" r="6.5" stroke="#B0B0B2" stroke-width="2" fill="none"/>212        <path d="M16 16l5 5" stroke="#B0B0B2" stroke-width="2" stroke-linecap="round"/>213      </svg>214      <span>Search for tasks, events, etc...</span>215    </div>216  </div>217 218  <!-- Promo card -->219  <div class="promo">220    <div class="text">221      <div class="title">Enjoying Any.do Teams? Finish your setup now</div>222      <span class="btn">Update payment</span>223    </div>224    <div class="img">[IMG: 14 DAYS LEFT graphic]</div>225  </div>226 227  <!-- My lists -->228  <div class="section-title">My lists</div>229  <div class="grid">230    <div class="tile">Personal</div>231    <div class="tile">Work</div>232    <div class="tile">233      Grocery List234      <span class="small-icon">235        <!-- basket icon -->236        <svg viewBox="0 0 24 24" width="40" height="40">237          <path d="M3 9h18l-2 10H5L3 9z" stroke="#8A8D92" stroke-width="2" fill="none" stroke-linejoin="round"/>238          <path d="M8 9l4-5 4 5" stroke="#8A8D92" stroke-width="2" fill="none" stroke-linecap="round"/>239        </svg>240      </span>241    </div>242    <div class="tile"><span class="plus">+</span></div>243  </div>244 245  <!-- Subsection with pill -->246  <div class="sub-head">247    <div class="label">abcde</div>248    <div class="pill">12 DAYS LEFT</div>249  </div>250  <div class="grid" style="padding-top: 12px;">251    <div class="tile"><span class="plus">+</span></div>252  </div>253 254  <!-- Bottom navigation -->255  <div class="bottom-nav">256    <div class="nav-item">257      <svg viewBox="0 0 24 24" class="icon-blue">258        <circle cx="12" cy="12" r="7" stroke-width="2"/>259        <circle cx="12" cy="12" r="2.5" fill="#2F7CFB"/>260      </svg>261      <div>My Day</div>262    </div>263    <div class="nav-item">264      <svg viewBox="0 0 24 24" class="icon-blue">265        <rect x="3" y="4" width="18" height="16" rx="3" stroke-width="2"/>266        <path d="M3 9h18" stroke-width="2"/>267        <text x="12" y="17" text-anchor="middle" font-size="10" fill="#2F7CFB" font-weight="700">7</text>268      </svg>269      <div>Next 7 days</div>270    </div>271    <div class="nav-item">272      <svg viewBox="0 0 24 24" class="icon-blue">273        <path d="M4 12l5 5 11-11" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>274      </svg>275      <div>All Tasks</div>276    </div>277    <div class="nav-item">278      <svg viewBox="0 0 24 24" class="icon-blue">279        <rect x="3" y="4" width="18" height="16" rx="3" stroke-width="2"/>280        <path d="M3 9h18" stroke-width="2"/>281        <path d="M7 13h4M13 13h4M7 16h4M13 16h4" stroke-width="2" />282      </svg>283      <div>Calendar</div>284    </div>285  </div>286 287</div>288</body>289</html>