GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reminder UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #3f516a; /* app blue backdrop */13    color: #111;14  }15 16  /* Header / Status */17  .status-bar {18    height: 100px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #e9edf3;24    background: #3f516a;25    font-size: 42px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .toolbar {33    height: 140px;34    padding: 0 36px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    color: #ffffff;39    background: #3f516a;40    border-bottom: 1px solid rgba(255,255,255,0.1);41  }42  .toolbar-left {43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .toolbar-title {48    font-size: 64px;49    font-weight: 700;50    letter-spacing: 1px;51  }52  .icon-btn {53    width: 72px;54    height: 72px;55    display: inline-flex;56    align-items: center;57    justify-content: center;58    border-radius: 8px;59  }60  .icon-btn svg { fill: #ffffff; width: 56px; height: 56px; }61 62  /* Content area */63  .content {64    position: absolute;65    top: 240px; /* below header */66    left: 0;67    right: 0;68    bottom: 0;69    background: #cfd6e2; /* list background */70  }71 72  .ad-banner {73    margin: 24px 36px;74    height: 160px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 34px;82    border-radius: 8px;83  }84 85  .list {86    margin-top: 6px;87    background: #cfd6e2;88  }89 90  .item {91    padding: 26px 36px 30px 36px;92    border-top: 1px solid rgba(0,0,0,0.08);93    border-bottom: 1px solid rgba(0,0,0,0.08);94    background: rgba(255,255,255,0.2);95    position: relative;96  }97  .item-title {98    font-size: 54px;99    font-weight: 700;100    color: #1e2b3a;101    margin-bottom: 12px;102  }103  .item-sub {104    font-size: 36px;105    color: #334154;106    margin-bottom: 4px;107  }108  .item-repeat {109    font-size: 34px;110    color: #5c6a81;111  }112  .item-right {113    position: absolute;114    right: 36px;115    top: 38px;116    font-size: 36px;117    color: #2b486e;118  }119  .star {120    position: absolute;121    right: 120px;122    top: 110px;123  }124  .star svg { width: 48px; height: 48px; fill: #5b69ff; }125 126  /* Tabs at bottom */127  .tabs {128    position: absolute;129    bottom: 140px;130    left: 0;131    right: 0;132    height: 110px;133    display: flex;134    align-items: center;135    justify-content: space-around;136    background: #cfd6e2;137    border-top: 1px solid rgba(0,0,0,0.1);138    color: #2b2b2b;139    font-size: 44px;140    letter-spacing: 1px;141  }142  .tab-active { font-weight: 800; }143 144  /* Floating Action Button */145  .fab {146    position: absolute;147    right: 72px;148    bottom: 220px;149    width: 160px;150    height: 160px;151    background: #2f4b75;152    border-radius: 50%;153    box-shadow: 0 20px 30px rgba(0,0,0,0.25);154    display: flex;155    align-items: center;156    justify-content: center;157  }158  .fab svg { width: 90px; height: 90px; fill: #ffffff; }159 160  /* Gesture bar */161  .gesture {162    position: absolute;163    bottom: 36px;164    left: 50%;165    transform: translateX(-50%);166    width: 480px;167    height: 18px;168    background: #6b717a;169    border-radius: 9px;170    opacity: 0.8;171  }172 173  /* Small light icons in status bar */174  .mini-icon svg { width: 38px; height: 38px; fill: #dfe6ee; }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status bar -->181  <div class="status-bar">182    <div>8:27</div>183    <div class="status-icons">184      <div class="mini-icon">185        <!-- WiFi icon -->186        <svg viewBox="0 0 24 24"><path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.8-7.1 1.4 1.4c3.6-3.6 9.2-3.6 12.8 0l1.4-1.4c-4.4-4.4-11.6-4.4-15.6 0zm3.4 3.4 1.4 1.4c2-2 5.3-2 7.3 0l1.4-1.4c-2.9-2.9-7.2-2.9-10.1 0z"/></svg>187      </div>188      <div class="mini-icon">189        <!-- Battery icon -->190        <svg viewBox="0 0 24 24"><path d="M20 8h2v8h-2v2H4V6h16v2zm-3 10V8H7v10h10z"/></svg>191      </div>192      <div class="mini-icon">193        <!-- Cloud icon -->194        <svg viewBox="0 0 24 24"><path d="M19 18H7a5 5 0 1 1 1-9.8A6 6 0 0 1 19 12h1a3 3 0 0 1 0 6h-1z"/></svg>195      </div>196    </div>197  </div>198 199  <!-- Toolbar -->200  <div class="toolbar">201    <div class="toolbar-left">202      <div class="icon-btn">203        <!-- Hamburger -->204        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>205      </div>206      <div class="toolbar-title">Reminder</div>207    </div>208    <div class="toolbar-left" style="gap:24px;">209      <div class="icon-btn">210        <!-- Search -->211        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 16 16.5l.3.3v.8L21 22l1-1-5.5-5.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>212      </div>213      <div class="icon-btn">214        <!-- Filter/sort -->215        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm6 6H11v2h2v-2z"/></svg>216      </div>217    </div>218  </div>219 220  <!-- Content -->221  <div class="content">222    <div class="ad-banner">[IMG: Ad Banner - Luxury Decorative Lighting]</div>223 224    <div class="list">225      <!-- Item 1 -->226      <div class="item">227        <div class="item-title">DOWNTIME</div>228        <div class="item-sub">06/20/2023  10:00 AM</div>229        <div class="item-repeat">Every Tuesday</div>230        <div class="item-right">in 7 days</div>231      </div>232 233      <!-- Item 2 -->234      <div class="item">235        <div class="item-title">Dolma Restaurant</div>236        <div class="item-sub">06/25/2023  12:00 PM</div>237        <div class="item-repeat">One Time</div>238        <div class="item-right">in 12 days</div>239      </div>240 241      <!-- Item 3 -->242      <div class="item">243        <div class="item-title">Boombox</div>244        <div class="item-sub">06/26/2023  10:15 AM</div>245        <div class="item-repeat">Every Month</div>246        <div class="item-right">in 13 days</div>247        <div class="star">248          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.7 7 .9-5.1 4.9 1.3 7.2L12 18l-6.3 3.7 1.3-7.2L2 9.6l7-.9L12 2z"/></svg>249        </div>250      </div>251 252      <!-- Item 4 -->253      <div class="item">254        <div class="item-title">Cricket</div>255        <div class="item-sub">06/29/2023  2:00 PM</div>256        <div class="item-repeat">One Time</div>257        <div class="item-right">in 16 days</div>258      </div>259 260      <!-- Item 5 -->261      <div class="item">262        <div class="item-title">Infinity</div>263        <div class="item-sub">06/30/2023  12:00 PM</div>264        <div class="item-repeat">One Time</div>265        <div class="item-right">in 17 days</div>266      </div>267 268      <!-- Item 6 -->269      <div class="item">270        <div class="item-title">Pixel5a</div>271        <div class="item-sub">07/1/2023  3:00 PM</div>272        <div class="item-repeat">One Time</div>273        <div class="item-right">in 18 days</div>274      </div>275 276      <!-- Item 7 -->277      <div class="item">278        <div class="item-title">Gomax</div>279        <div class="item-sub">07/2/2023  5:00 PM</div>280        <div class="item-repeat">One Time</div>281        <div class="item-right">in 19 days</div>282      </div>283 284      <!-- Item 8 -->285      <div class="item">286        <div class="item-title">Cello</div>287        <div class="item-sub">07/3/2023  6:00 PM</div>288        <div class="item-repeat">One Time</div>289        <div class="item-right">in 20 days</div>290      </div>291    </div>292 293    <!-- Tabs -->294    <div class="tabs">295      <div class="tab-active">ACTIVE</div>296      <div>COMPLETED</div>297    </div>298 299    <!-- FAB -->300    <div class="fab">301      <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>302    </div>303  </div>304 305  <!-- Gesture bar -->306  <div class="gesture"></div>307</div>308</body>309</html>