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>Reminder UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #d4dae4; /* light bluish-gray app background */19    font-family: "Segoe UI", Arial, sans-serif;20    color: #25303d;21  }22 23  /* Top header area */24  .top-wrap {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 330px;30    background: #2f4660; /* deep blue */31    color: #ecf2f8;32  }33  .status-bar {34    height: 90px;35    padding: 0 36px;36    display: flex;37    align-items: center;38    justify-content: space-between;39    font-weight: 600;40    font-size: 38px;41    letter-spacing: 1px;42  }43  .status-icons {44    display: flex;45    align-items: center;46    gap: 22px;47  }48  .dot {49    width: 18px;50    height: 18px;51    background: #e8edf5;52    border-radius: 50%;53    opacity: .9;54  }55  .app-bar {56    height: 240px;57    display: flex;58    align-items: center;59    padding: 0 36px;60    justify-content: space-between;61  }62  .left-app {63    display: flex;64    align-items: center;65    gap: 26px;66  }67  .title {68    font-size: 64px;69    font-weight: 650;70    letter-spacing: 0.5px;71  }72  .icon-btn {73    width: 80px;74    height: 80px;75    display: inline-flex;76    align-items: center;77    justify-content: center;78    border-radius: 12px;79    color: #e7edf6;80  }81 82  /* Chips row */83  .chips {84    position: absolute;85    top: 330px;86    left: 0;87    width: 1080px;88    height: 120px;89    background: #2f4660;90    display: flex;91    align-items: center;92    padding: 0 28px;93    gap: 18px;94  }95  .chip {96    color: #dbe3ee;97    padding: 18px 34px;98    border-radius: 26px;99    border: 2px solid rgba(219,227,238,0.35);100    font-size: 34px;101  }102  .chip.active {103    border: 3px solid #f0e27a;104    color: #f6f2bf;105  }106 107  /* Ad banner placeholder */108  .ad-banner {109    position: absolute;110    top: 468px;111    left: 60px;112    width: 960px;113    height: 140px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #757575;120    font-size: 30px;121  }122 123  /* List of reminders */124  .list {125    position: absolute;126    top: 630px;127    left: 0;128    width: 1080px;129  }130  .item {131    padding: 30px 40px 34px 36px;132    border-top: 1px solid rgba(31,41,55,0.12);133    border-bottom: 1px solid rgba(31,41,55,0.12);134    background: rgba(255,255,255,0.05);135  }136  .item .row {137    display: flex;138    justify-content: space-between;139    align-items: baseline;140  }141  .item-title {142    font-size: 48px;143    font-weight: 800;144    color: #223142;145  }146  .tag {147    font-size: 34px;148    color: #3c6ea3;149  }150  .meta {151    margin-top: 8px;152    font-size: 34px;153    color: #5c6b7b;154  }155 156  /* Bottom area */157  .bottom-tabs {158    position: absolute;159    bottom: 140px;160    left: 0;161    width: 1080px;162    display: flex;163    justify-content: space-around;164    color: #20262d;165    font-size: 40px;166  }167  .bottom-tabs .active-tab {168    font-weight: 800;169    text-decoration: underline;170  }171 172  /* FAB */173  .fab {174    position: absolute;175    right: 72px;176    bottom: 280px;177    width: 150px;178    height: 150px;179    background: #2f4660;180    border-radius: 50%;181    box-shadow: 0 16px 24px rgba(0,0,0,0.25);182    display: flex;183    align-items: center;184    justify-content: center;185    color: white;186  }187 188  /* Home indicator */189  .home-indicator {190    position: absolute;191    bottom: 70px;192    left: 50%;193    transform: translateX(-50%);194    width: 420px;195    height: 14px;196    background: #8e939a;197    border-radius: 8px;198    opacity: .8;199  }200</style>201</head>202<body>203<div id="render-target">204  <div class="top-wrap">205    <div class="status-bar">206      <div>10:31</div>207      <div class="status-icons">208        <div class="dot" style="width:24px;height:24px;"></div>209        <div class="dot" style="width:24px;height:24px;"></div>210        <div class="dot" style="width:24px;height:24px;"></div>211        <div class="dot" style="opacity:.6;"></div>212        <svg width="38" height="30" viewBox="0 0 24 24" fill="none">213          <path d="M2 18h20L12 6 2 18z" fill="#eef4fc"/>214        </svg>215        <svg width="34" height="34" viewBox="0 0 24 24" fill="#eef4fc">216          <path d="M17 4h-3l-1-1h-2l-1 1H6v2h11V4zm1 4H6l1 12h10l1-12z"/>217        </svg>218      </div>219    </div>220    <div class="app-bar">221      <div class="left-app">222        <div class="icon-btn" aria-label="menu">223          <svg width="46" height="46" viewBox="0 0 24 24" fill="#ecf2f8">224            <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>225          </svg>226        </div>227        <div class="title">Reminder</div>228      </div>229      <div class="right-app" style="display:flex; gap:18px;">230        <div class="icon-btn" aria-label="search">231          <svg width="46" height="46" viewBox="0 0 24 24" fill="#ecf2f8">232            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>233          </svg>234        </div>235        <div class="icon-btn" aria-label="filter">236          <svg width="46" height="46" viewBox="0 0 24 24" fill="#ecf2f8">237            <path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z"/>238          </svg>239        </div>240      </div>241    </div>242  </div>243 244  <div class="chips">245    <div class="chip active">All</div>246    <div class="chip">Critical</div>247    <div class="chip">Important</div>248    <div class="chip">Favorites</div>249    <div class="chip">Optional</div>250  </div>251 252  <div class="ad-banner">[IMG: Ad banner]</div>253 254  <div class="list">255    <div class="item">256      <div class="row">257        <div class="item-title">[Snooze] VCA Virtual Meet</div>258        <div class="tag">Today</div>259      </div>260      <div class="meta">08/29/2023  10:32 AM</div>261      <div class="meta">One Time</div>262    </div>263 264    <div class="item">265      <div class="row">266        <div class="item-title">[Snooze] DOWNTIME</div>267        <div class="tag">Today</div>268      </div>269      <div class="meta">08/29/2023  10:33 AM</div>270      <div class="meta">One Time [Snooze]</div>271    </div>272 273    <div class="item">274      <div class="row">275        <div class="item-title">DOWNTIME</div>276        <div class="tag">in 7 days</div>277      </div>278      <div class="meta">09/5/2023  10:00 AM</div>279      <div class="meta">Every Tuesday</div>280    </div>281 282    <div class="item">283      <div class="row">284        <div class="item-title">Detroit Free Press Marathon 2</div>285        <div class="tag">in 18 days</div>286      </div>287      <div class="meta">09/16/2023  5:30 AM</div>288      <div class="meta">Every Month</div>289    </div>290  </div>291 292  <div class="fab" aria-label="add">293    <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">294      <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>295    </svg>296  </div>297 298  <div class="bottom-tabs">299    <div class="active-tab">ACTIVE</div>300    <div>COMPLETED</div>301  </div>302 303  <div class="home-indicator"></div>304</div>305</body>306</html>