GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Reminder UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #d5dae6;11  }12 13  /* Top bars */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 120px;16    background: #2f4765; color: #e9eff9;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; box-sizing: border-box; letter-spacing: 0.5px;19    font-size: 34px;20  }21  .app-bar {22    position: absolute; top: 120px; left: 0; width: 100%; height: 210px;23    background: #2f4765; color: #ffffff;24    display: flex; align-items: center;25    box-sizing: border-box; padding: 0 40px;26  }27  .app-title { font-size: 56px; font-weight: 600; margin-left: 24px; letter-spacing: 0.5px; }28 29  .top-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }30 31  /* Chips row */32  .chips {33    position: absolute; top: 330px; left: 0; width: 100%; height: 160px;34    background: #2f4765; display: flex; align-items: center;35    padding: 0 40px; box-sizing: border-box; gap: 24px;36  }37  .chip {38    color: #d7e2f0; background: #3f566f; border: 3px solid #2c4058;39    border-radius: 28px; padding: 22px 34px; font-size: 34px;40    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);41  }42  .chip.active {43    background: transparent; color: #ffdc60; border-color: #ffdc60;44    box-shadow: none;45  }46 47  /* List section */48  .content {49    position: absolute; top: 490px; left: 0; width: 100%; bottom: 0;50  }51  .reminder {52    background: #dbe0ec; border-bottom: 1px solid #b8c0d0;53    padding: 36px 40px; box-sizing: border-box;54  }55  .row-head {56    display: flex; align-items: baseline; justify-content: space-between;57  }58  .title { font-size: 52px; color: #1f2d3e; font-weight: 600; }59  .due { font-size: 34px; color: #6c7483; }60  .meta { margin-top: 12px; font-size: 32px; color: #7a8392; }61 62  /* FAB */63  .fab {64    position: absolute; right: 74px; bottom: 340px; width: 160px; height: 160px;65    border-radius: 50%; background: #2f4f71; box-shadow: 0 14px 22px rgba(37,52,73,0.35);66    display: flex; align-items: center; justify-content: center;67  }68 69  /* Bottom tabs */70  .bottom-tabs {71    position: absolute; bottom: 160px; left: 0; width: 100%;72    display: flex; justify-content: space-between; padding: 0 120px; box-sizing: border-box;73    color: #2a323c; font-size: 38px;74  }75  .bottom-tabs .active { font-weight: 700; text-decoration: underline; }76 77  /* Navigation pill */78  .nav-pill {79    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);80    width: 360px; height: 16px; background: #9097a3; border-radius: 10px; opacity: 0.7;81  }82 83  /* Icons */84  .icon { width: 60px; height: 60px; }85  .hamburger { width: 72px; height: 72px; margin-right: 12px; }86  .filter { width: 60px; height: 60px; }87</style>88</head>89<body>90<div id="render-target">91  <!-- Status Bar -->92  <div class="status-bar">93    <div>8:29</div>94    <div>95      <!-- simple battery icon -->96      <svg class="icon" viewBox="0 0 24 24" fill="#e9eff9">97        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#e9eff9" stroke-width="1.5" fill="none"/>98        <rect x="21" y="9" width="2" height="6" fill="#e9eff9"/>99        <rect x="4" y="8" width="12" height="8" fill="#e9eff9"/>100      </svg>101    </div>102  </div>103 104  <!-- App Bar -->105  <div class="app-bar">106    <!-- Hamburger -->107    <svg class="hamburger" viewBox="0 0 24 24">108      <rect x="3" y="5" width="18" height="2" fill="#ffffff"/>109      <rect x="3" y="11" width="18" height="2" fill="#ffffff"/>110      <rect x="3" y="17" width="18" height="2" fill="#ffffff"/>111    </svg>112    <div class="app-title">Reminder</div>113    <div class="top-actions">114      <!-- Search icon -->115      <svg class="icon" viewBox="0 0 24 24">116        <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2" fill="none"/>117        <line x1="15" y1="15" x2="21" y2="21" stroke="#ffffff" stroke-width="2"/>118      </svg>119      <!-- Filter icon -->120      <svg class="filter" viewBox="0 0 24 24">121        <line x1="3" y1="6" x2="21" y2="6" stroke="#ffffff" stroke-width="2"/>122        <line x1="6" y1="12" x2="18" y2="12" stroke="#ffffff" stroke-width="2"/>123        <line x1="9" y1="18" x2="15" y2="18" stroke="#ffffff" stroke-width="2"/>124      </svg>125    </div>126  </div>127 128  <!-- Chips -->129  <div class="chips">130    <div class="chip active">All</div>131    <div class="chip">Default</div>132    <div class="chip">Critical</div>133    <div class="chip">Important</div>134    <div class="chip">Favorites</div>135  </div>136 137  <!-- Content list -->138  <div class="content">139    <div class="reminder">140      <div class="row-head">141        <div class="title">Wedding</div>142        <div class="due">in 13 days</div>143      </div>144      <div class="meta">06/26/2023&nbsp;&nbsp; 8:00 PM</div>145      <div class="meta">One Time</div>146    </div>147 148    <div class="reminder">149      <div class="row-head">150        <div class="title">Friends</div>151        <div class="due">in 19 days</div>152      </div>153      <div class="meta">07/2/2023&nbsp;&nbsp; 7:30 PM</div>154      <div class="meta">Every Sunday</div>155    </div>156  </div>157 158  <!-- Floating Action Button -->159  <div class="fab">160    <svg viewBox="0 0 24 24" width="90" height="90">161      <rect x="11" y="4" width="2" height="16" fill="#ffffff"/>162      <rect x="4" y="11" width="16" height="2" fill="#ffffff"/>163    </svg>164  </div>165 166  <!-- Bottom tabs -->167  <div class="bottom-tabs">168    <div class="active">ACTIVE</div>169    <div>COMPLETED</div>170  </div>171 172  <!-- Navigation pill -->173  <div class="nav-pill"></div>174</div>175</body>176</html>