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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #D9DEE9;15    border-radius: 36px;16    box-shadow: 0 20px 40px rgba(0,0,0,0.25);17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18    color: #1B2838;19  }20 21  /* Top header area */22  .top-bg {23    position: absolute;24    left: 0;25    top: 0;26    width: 1080px;27    height: 340px;28    background: linear-gradient(180deg, #2E4768 0%, #2E4768 60%, rgba(46,71,104,0.95) 100%);29  }30 31  .status {32    position: absolute;33    top: 28px;34    right: 36px;35    display: flex;36    align-items: center;37    gap: 16px;38    color: #FFFFFF;39    font-weight: 600;40    font-size: 36px;41  }42  .status svg { width: 40px; height: 40px; fill: #FFFFFF; }43 44  .header {45    position: absolute;46    top: 96px;47    left: 36px;48    display: flex;49    align-items: center;50    gap: 18px;51    color: #DFE7F6;52    font-size: 44px;53    font-weight: 600;54  }55  .header .app-icon {56    width: 64px; height: 64px;57    border-radius: 50%;58    background: #B3C3FF;59    display: inline-flex; align-items: center; justify-content: center;60  }61  .header .app-icon svg { width: 40px; height: 40px; fill: #2E4768; }62 63  /* Notification card */64  .notif {65    position: absolute;66    top: 150px;67    left: 36px;68    width: 1008px;69    background: #2B2B2B;70    color: #F5F5F5;71    border-radius: 40px;72    padding: 32px 36px;73    box-shadow: 0 20px 30px rgba(0,0,0,0.45);74  }75  .notif .row1 {76    display: flex;77    align-items: center;78    justify-content: space-between;79  }80  .notif .left {81    display: flex;82    align-items: center;83    gap: 22px;84  }85  .notif .left .badge {86    width: 72px; height: 72px; border-radius: 36px;87    background: #6670FF;88    display: flex; align-items: center; justify-content: center;89  }90  .notif .left .badge svg { width: 40px; height: 40px; fill: #D9E0FF; }91  .notif .title {92    font-size: 44px; font-weight: 700;93  }94  .notif .sub {95    font-size: 34px; color: #C7C7C7; margin-left: 6px;96  }97  .notif .chev {98    width: 60px; height: 60px; border-radius: 30px; background: #1F1F1F;99    display: flex; align-items: center; justify-content: center;100  }101  .notif .chev svg { width: 28px; height: 28px; fill: #EDEDED; }102 103  .notif .actions {104    margin-top: 28px;105    display: flex; gap: 28px;106  }107  .pill {108    padding: 20px 40px;109    border-radius: 28px;110    background: #DADDE0;111    color: #1E1E1E;112    font-size: 34px; font-weight: 800; letter-spacing: 1px;113  }114 115  /* List */116  .list {117    position: absolute;118    top: 360px;119    left: 0;120    width: 100%;121  }122  .item {123    padding: 40px 36px;124    border-top: 1px solid rgba(0,0,0,0.08);125    border-bottom: 1px solid rgba(0,0,0,0.08);126    background: rgba(255,255,255,0.2);127  }128  .item .line1 {129    display: flex; justify-content: space-between; align-items: baseline;130  }131  .item .title { font-size: 52px; font-weight: 800; color: #1B2838; }132  .item .right { font-size: 38px; color: #6A7380; }133  .item .meta { margin-top: 10px; font-size: 36px; color: #6A7380; }134  .item .freq { margin-top: 6px; font-size: 34px; color: #7C8696; }135 136  /* FAB */137  .fab {138    position: absolute;139    right: 72px;140    bottom: 360px;141    width: 150px; height: 150px;142    border-radius: 50%;143    background: #2E4768;144    box-shadow: 0 18px 28px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.08);145    display: flex; align-items: center; justify-content: center;146  }147  .fab svg { width: 64px; height: 64px; stroke: #FFFFFF; stroke-width: 12; }148 149  /* Bottom tabs */150  .tabs {151    position: absolute;152    bottom: 190px;153    width: 100%;154    display: flex; justify-content: space-around; align-items: center;155    color: #2A2A2A;156  }157  .tabs .active {158    font-weight: 800;159    font-size: 40px;160    text-decoration: underline;161  }162  .tabs .inactive {163    font-size: 40px;164    color: #666B73;165    font-weight: 700;166  }167 168  /* Gesture bar */169  .gesture {170    position: absolute;171    bottom: 90px;172    left: 50%;173    transform: translateX(-50%);174    width: 560px; height: 14px;175    background: #7B7F85;176    border-radius: 7px;177    opacity: 0.7;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <div class="top-bg"></div>185 186  <!-- Status icons -->187  <div class="status">188    <!-- Wifi -->189    <svg viewBox="0 0 24 24">190      <path d="M12 18a2 2 0 1 0 0.001 0zM2 8c5.5-4 14.5-4 20 0l-1.5 1.5C16 6 8 6 3.5 9.5L2 8zm4 4c3.5-2.5 8.5-2.5 12 0l-1.5 1.5c-2.9-2-6.1-2-9 0L6 12zm4 4c1.5-1 4.5-1 6 0l-3 3-3-3z"/>191    </svg>192    <!-- Battery -->193    <svg viewBox="0 0 24 24">194      <path d="M2 9a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9zm18-2h2v10h-2V7z"/>195    </svg>196    <span>100%</span>197  </div>198 199  <!-- Header title -->200  <div class="header">201    <div class="app-icon">202      <svg viewBox="0 0 24 24">203        <path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm-8 10c0-3.3 4.2-6 8-6s8 2.7 8 6H4z"/>204      </svg>205    </div>206    <div>Reminder</div>207  </div>208 209  <!-- Notification card -->210  <div class="notif">211    <div class="row1">212      <div class="left">213        <div class="badge">214          <svg viewBox="0 0 24 24">215            <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 0 0-12 0v7L4 17v2h16v-2l-2-1z"/>216          </svg>217        </div>218        <div style="display:flex; flex-direction:column;">219          <div class="title">Meet &amp; Greet <span class="sub">· now</span>220            <svg viewBox="0 0 24 24" style="width:28px;height:28px; vertical-align:middle; margin-left:8px; fill:#C7C7C7;">221              <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 0 0-12 0v7L4 17v2h16v-2l-2-1z"/>222            </svg>223          </div>224        </div>225      </div>226      <div class="chev">227        <svg viewBox="0 0 24 24">228          <path d="M7 10l5 5 5-5z"/>229        </svg>230      </div>231    </div>232    <div class="actions">233      <div class="pill">SNOOZE</div>234      <div class="pill">DISMISS</div>235    </div>236  </div>237 238  <!-- List of reminders -->239  <div class="list">240    <div class="item">241      <div class="line1">242        <div class="title">Meet &amp; Greet</div>243        <div class="right">Today</div>244      </div>245      <div class="meta">08/10/2023&nbsp;&nbsp; 1:48 PM</div>246      <div class="freq">One Time</div>247    </div>248 249    <div class="item">250      <div class="line1">251        <div class="title">Birthday Party!</div>252        <div class="right">Today</div>253      </div>254      <div class="meta">08/10/2023&nbsp;&nbsp; 7:00 PM</div>255      <div class="freq">Every Year</div>256    </div>257  </div>258 259  <!-- Floating action button -->260  <div class="fab">261    <svg viewBox="0 0 24 24">262      <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="none"/>263    </svg>264  </div>265 266  <!-- Bottom tabs -->267  <div class="tabs">268    <div class="active">ACTIVE</div>269    <div class="inactive">COMPLETED</div>270  </div>271 272  <div class="gesture"></div>273 274</div>275</body>276</html>