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</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #D8DEE8; /* light bluish gray */20    color: #1f1f1f;21  }22 23  /* App bar */24  .appbar {25    position: relative;26    width: 100%;27    height: 420px;28    background: #3C4E68; /* deep blue gray */29    color: #F0F4FA;30    box-sizing: border-box;31    padding: 56px 42px 24px 42px;32  }33  .status-bar {34    display: flex;35    align-items: center;36    justify-content: space-between;37    opacity: 0.95;38    font-size: 40px;39    margin-bottom: 20px;40  }41  .status-left,42  .status-right {43    display: flex;44    align-items: center;45    gap: 18px;46  }47 48  .header-row {49    display: flex;50    align-items: center;51    justify-content: space-between;52    margin-top: 10px;53  }54  .title-wrap {55    display: flex;56    align-items: center;57    gap: 30px;58  }59  .title {60    font-size: 72px;61    font-weight: 600;62    letter-spacing: 0.5px;63  }64  .icon-btn {65    width: 72px;66    height: 72px;67    display: inline-flex;68    align-items: center;69    justify-content: center;70  }71  .icon-btn svg { fill: #E7EDF7; }72 73  .chips {74    display: flex;75    gap: 24px;76    margin-top: 34px;77    flex-wrap: nowrap;78  }79  .chip {80    padding: 26px 40px;81    font-size: 40px;82    color: #E6ECF7;83    border: 3px solid #2C3B50;84    background: #3C4E68;85    border-radius: 60px;86    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);87  }88  .chip.active {89    border-color: #D6D873; /* yellowish highlight */90  }91 92  /* Content list */93  .content {94    position: absolute;95    top: 420px;96    left: 0;97    right: 0;98    bottom: 0;99  }100  .list {101    padding: 24px 0 0 0;102  }103  .list-item {104    padding: 40px 42px 44px 42px;105    border-bottom: 2px solid rgba(0,0,0,0.08);106  }107  .item-title {108    font-size: 60px;109    color: #2B2F33;110    margin-bottom: 14px;111  }112  .item-sub {113    font-size: 36px;114    color: #6E7781;115    margin-bottom: 8px;116    letter-spacing: 0.3px;117  }118 119  /* Bottom area */120  .fab {121    position: absolute;122    right: 72px;123    bottom: 340px;124    width: 170px;125    height: 170px;126    border-radius: 50%;127    background: #334761;128    box-shadow: 0 18px 24px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.18);129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .fab svg { fill: #FFFFFF; }134 135  .bottom-tabs {136    position: absolute;137    left: 48px;138    right: 48px;139    bottom: 250px;140    display: flex;141    justify-content: space-between;142    align-items: center;143    color: #2B2F33;144  }145  .tab {146    font-size: 44px;147    letter-spacing: 1px;148    color: rgba(0,0,0,0.6);149  }150  .tab.active {151    color: #2B2F33;152    font-weight: 700;153    border-bottom: 6px solid #2B2F33;154    padding-bottom: 6px;155  }156 157  /* Gesture bar */158  .gesture {159    position: absolute;160    left: 50%;161    transform: translateX(-50%);162    bottom: 70px;163    width: 520px;164    height: 14px;165    border-radius: 8px;166    background: rgba(63,63,63,0.55);167  }168</style>169</head>170<body>171<div id="render-target">172  <div class="appbar">173    <div class="status-bar">174      <div class="status-left">175        <div style="font-weight:600;">12:36</div>176        <!-- Sun icon -->177        <svg width="38" height="38" viewBox="0 0 24 24">178          <circle cx="12" cy="12" r="4" fill="#FFFFFF"/>179          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>180        </svg>181      </div>182      <div class="status-right">183        <!-- Wi-Fi -->184        <svg width="36" height="36" viewBox="0 0 24 24">185          <path d="M2 8c5-4 15-4 20 0M5 11c3.5-3 10.5-3 14 0M8 14c2-2 6-2 8 0M12 18a1.3 1.3 0 1 0 0 2.6A1.3 1.3 0 0 0 12 18z" fill="none" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>186        </svg>187        <!-- Battery -->188        <svg width="44" height="44" viewBox="0 0 28 18">189          <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>190          <rect x="3" y="5" width="14" height="8" fill="#FFFFFF"/>191          <rect x="23" y="7" width="4" height="6" rx="1" fill="#FFFFFF"/>192        </svg>193      </div>194    </div>195 196    <div class="header-row">197      <div class="title-wrap">198        <!-- Hamburger -->199        <div class="icon-btn" aria-label="menu">200          <svg width="52" height="52" viewBox="0 0 24 24">201            <path d="M3 6h18M3 12h18M3 18h18" stroke="#E7EDF7" stroke-width="2.4" stroke-linecap="round"/>202          </svg>203        </div>204        <div class="title">Reminder</div>205      </div>206      <div>207        <!-- Search -->208        <span class="icon-btn" aria-label="search">209          <svg width="50" height="50" viewBox="0 0 24 24">210            <path d="M10.5 3a7.5 7.5 0 1 0 4.8 13.3l4 4a1.2 1.2 0 0 0 1.7-1.7l-4-4A7.5 7.5 0 0 0 10.5 3z" fill="#E7EDF7"/>211          </svg>212        </span>213        <!-- Filter -->214        <span class="icon-btn" aria-label="filter">215          <svg width="50" height="50" viewBox="0 0 24 24">216            <path d="M3 6h18l-6 7v5l-6 3v-8L3 6z" fill="#E7EDF7"/>217          </svg>218        </span>219      </div>220    </div>221 222    <div class="chips">223      <div class="chip active">All</div>224      <div class="chip">Critical</div>225      <div class="chip">Important</div>226      <div class="chip">Favorites</div>227      <div class="chip">Optional</div>228    </div>229  </div>230 231  <div class="content">232    <div class="list">233      <div class="list-item">234        <div class="item-title">client meeting</div>235        <div class="item-sub">09/30/2023  1:00 PM</div>236        <div class="item-sub">Every Day</div>237      </div>238    </div>239 240    <div class="fab" aria-label="add">241      <svg width="80" height="80" viewBox="0 0 24 24">242        <path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#FFFFFF"/>243      </svg>244    </div>245 246    <div class="bottom-tabs">247      <div class="tab">ACTIVE</div>248      <div class="tab active">COMPLETED</div>249    </div>250 251    <div class="gesture"></div>252  </div>253</div>254</body>255</html>